9/21/2017 - 9:37 AM

LessCss variable scope

.test-mixin-scope() {
  test-mixin-scope-test: @inner;

#nested {
  // This variable only to the #nest name space.
  @inner: "Namespace default";
  .outer() {
    .middle() {
      // define a default value based on the @inner variable that is scoped ot the namespace
      .inner(@input: @inner) {
        // this doesnot interfear with the @inner in inner mixin
        // this value will be available to all the calling context
        @inner: "passed up from das inner mixin";
        // test the tranlation of #nested namespace inner to input
        namespace-test: @input;
      // invoke mixin `inner`
      middle-test: @inner;
    // invoke mixin `middle`
    outer-test: @inner;

// given the body context

// When we invoke the .test-mixin-scope() mixin, well be triggering the invocation
// of several nested mixin calls; ultimately, this will call the .inner() mixin which
// will create a variable which will become available in the stack up to the body{}.

body {
  // Since variables act somewhat like "constants", this. will prevent mixin overriding variable in parent scope
  @inner: "Start the demo";
  // override variable value inside the context of single block or mixin
  @inner: "Rock the body";
  // css guard  (and any other ruleset) create its own private scope
  // will now override in parent scope
  & when(true) {
    @inner: "In css guard";
  // check current @inner value;
  body-test: @inner;

/* output:

body {
    namespace-test: "Namespace default";
    middle-test: "Passed up from das inner mixin";
    outer-test: "Passed up from das inner mixin";
    test-mixin-scope-test: "Passed up from das inner mixin";
    body-test: "Rock the body";