Cacher is the code snippet organizer for pro developers

.test-mixin-scope() {
  #nested.outer();
  
  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`
      .inner();
      
      middle-test: @inner;
    }
    // invoke mixin `middle`
    .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";
  }
  
  .test-mixin-scope();
  
  // 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";
}

*/