Detached Rulesets

将规则集分配给变量

发布 v1.7.0

一个分离的规则集是一组 CSS 属性、嵌套规则集、媒体声明或任何其它存储在变量中的内容。你可以将其包含到规则集或其它结构中，并将其所有属性复制到那里。你还可以将其用作 mixin 参数，并像任何其它变量一样传递它。

简单的例子：

// 声明分离的规则集
@detached-ruleset: {
  background: red;
}; // 分号在 3.5.0+ 中是可选的

// 使用分离的规则集
.top {
  @detached-ruleset();
}

编译为：

.top {
  background: red;
}

分离的规则集调用后必须加括号（除非后面跟着一个查找值）。调用 @detached-ruleset; 将不起作用。

当你想要定义一个 mixin 以抽象出在媒体查询中包装代码或非支持的浏览器类名时，它非常有用。规则集可以传递给 mixin，以便 mixin 可以包装内容，例如：

.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200px) {
    @rules();
  }
  html.lt-ie9 & {
    @rules();
  }
}

header {
  background-color: blue;

  .desktop-and-old-ie({
    background-color: red;
  });
}

在这里，desktop-and-old-ie mixin 定义了媒体查询和根类，以便你可以使用 mixin 包装代码。这将输出

header {
  background-color: blue;
}
@media screen and (min-width: 1200px) {
  header {
    background-color: red;
  }
}
html.lt-ie9 header {
  background-color: red;
}

现在可以将规则集分配给变量或传递给 mixin，并且可以包含 Less 的全部功能，例如：

@my-ruleset: {
  .my-selector {
    background-color: black;
  }
};

你甚至可以利用媒体查询冒泡，例如

@my-ruleset: {
  .my-selector {
    @media tv {
      background-color: black;
    }
  }
};
@media (orientation: portrait) {
  @my-ruleset();
}

这将输出

@media (orientation: portrait) and tv {
  .my-selector {
    background-color: black;
  }
}

分离的规则集调用将其所有 mixin 解锁（返回）到调用者，就像 mixin 调用一样。但是，它不会返回变量。

返回的 mixin：

// 带有 mixin 的分离规则集
@detached-ruleset: {
  .my-mixin() {
    color: blue;
  }
};
// 调用分离的规则集
.caller {
  @detached-ruleset();
  .mixin();
}

结果为：

.caller {
  color: blue;
}

私有变量：

@detached-ruleset: {
  @color: blue; // 此变量是私有的
};
.caller {
  color: @color; // 语法错误
}

作用域（Scoping）

分离的规则集可以使用它被定义和调用的地方可访问的所有变量和混合。换句话说，它可以使用定义和调用作用域。如果两个作用域都包含相同的变量或混合，则声明作用域值优先。

声明作用域 是分离的规则集体的定义所在的作用域。将分离的规则集从一个变量复制到另一个变量中不能修改其作用域。仅通过在其中引用它，规则集不会仅仅获得对新作用域的访问权限。

最后，通过解锁（导入）到作用域中，分离的规则集可以获得访问权限。

注意：通过调用混合锁定变量到作用域中的做法已被弃用。使用属性/变量访问器。

定义和调用作用域可见性

分离的规则集可以看到调用者的变量和混合：

@detached-ruleset: {
  caller-variable: @caller-variable; // 此处未定义变量
  .caller-mixin(); // 此处未定义混合
};

selector {
  // 使用分离的规则集
  @detached-ruleset();

  // 定义在分离的规则集中需要的变量和混合
  @caller-variable: value;
  .caller-mixin() {
    variable: declaration;
  }
}

编译为：

selector {
  caller-variable: value;
  variable: declaration;
}

定义中可访问的变量和混合优先于调用中可访问的变量和混合：

@variable: global;
@detached-ruleset: {
  // 将使用全局变量，因为它可以从分离的规则集定义中访问
  variable: @variable;
};

selector {
  @detached-ruleset();
  @variable: value; // 在调用中定义的变量 - 将被忽略
}

编译为：

selector {
  variable: global;
}

引用不会修改分离的规则集作用域

规则集不会仅仅通过在其中引用它获得对新作用域的访问权限：

@detached-1: {
  scope-detached: @one @two;
};
.one {
  @one: visible;
  .two {
    @detached-2: @detached-1; // 复制/重命名规则集
    @two: visible; // 规则集无法看到此变量
  }
}

.use-place {
  .one > .two();
  @detached-2();
}

抛出错误：

ERROR 1:32 The variable "@one" was not declared.

解锁将修改分离的规则集范围

分离的规则集通过在作用域中解锁（导入）来获得访问权限：

#space {
  .importer-1() {
    @detached: {
      scope-detached: @variable;
    }; // define detached ruleset
  }
}

.importer-2() {
  @variable: value; // unlocked detached ruleset CAN see this variable
  #space > .importer-1(); // unlock/import detached ruleset
}

.use-place {
  .importer-2(); // unlock/import detached ruleset second time
  @detached();
}

编译为：

.use-place {
  scope-detached: value;
}

属性/变量访问器（Property / variable）

（查找值）

发布 v3.5.0

从 Less 3.5 开始，您可以使用属性/变量访问器（也称为“查找”）从变量（分离）规则集中选择值。

@config: {
  option1: true;
  option2: false;
};

.mixin() when (@config[option1] = true) {
  selected: value;
}

.box {
  .mixin();
}

输出：

.box {
  selected: value;
}

如果从查找返回的是另一个分离的规则集，则可以使用第二个查找来获取该值。

@config: {
  @colors: {
    primary: blue;
  };
};

.box {
  color: @config[@colors][primary];
}

查找可变变量

返回的查找值本身可以是可变的。如在，你可以写：

@config: {
  @dark: {
    primary: darkblue;
  };
  @light: {
    primary: lightblue;
  };
};

.box {
  @lookup: dark;
  color: @config[@@lookup][primary];
}

输出：

.box {
  color: darkblue;
}