将 mixins 和变量解锁到调用者作用域

已弃用 - 使用属性/值访问器

mixin 中定义的变量和 mixin 是可见的,可以在调用者的作用域内使用。 只有一个例外: 如果调用者包含具有相同名称的变量(包括由另一个 mixin 调用定义的变量),则不会复制该变量。 只有存在于调用者本地作用域内的变量才受到保护。 从父作用域继承的变量被覆盖。

注意: 这种行为已被弃用,将来,变量和混合将不会以这种方式合并到调用者作用域中。

例子:

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

结果是:

.caller {
  width:  100%;
  height: 200px;
}

不能覆盖直接在调用者作用域内定义的变量。 但是,调用者父作用域中定义的变量不受保护,将被覆盖:

.mixin() {
  @size: in-mixin;
  @definedOnlyInMixin: in-mixin;
}

.class {
  margin: @size @definedOnlyInMixin;
  .mixin();
}

@size: globaly-defined-value; // callers parent scope - no protection

结果是:

.class {
  margin: in-mixin in-mixin;
}

最后,mixin 中定义的 mixin 也作为返回值:

.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //nested mixin was copied here and is usable
}

结果是:

#namespace {
  declaration: 5;
}