分离规则集

将规则集分配给变量
发布于 v1.7.0

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

举个简单的例子：

```less
// declare detached ruleset
@detached-ruleset: { background: red; }; // semi-colon is optional in 3.5.0+

// use detached ruleset
.top {
    @detached-ruleset(); 
}
```
编译成：

```less
.top {
  background: red;
}
```
分离规则集调用后的括号是强制性的（除非后面有查找值）。调用 `@detached-ruleset`; 将不起作用。

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

```less
.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 来封装一段代码。这将输出：

```less
header {
  background-color: blue;
}
@media screen and (min-width: 1200px) {
  header {
    background-color: red;
  }
}
html.lt-ie9 header {
  background-color: red;
}
```
规则集现在可以分配给一个变量或传递给一个 mixin，并可以包含完整的 Less 功能集，例如：

```less
@my-ruleset: {
    .my-selector {
      background-color: black;
    }
};
```
您甚至可以利用媒体查询的冒泡功能，例如：

```less
@my-ruleset: {
    .my-selector {
      @media tv {
        background-color: black;
      }
    }
  };
@media (orientation:portrait) {
    @my-ruleset();
}
```
将输出：

```less
@media (orientation: portrait) and tv {
  .my-selector {
    background-color: black;
  }
}
```
分离规则集调用会将其所有 mixin 解锁（返回）给调用者，与 mixin 调用的方式相同。不过，它不会返回变量。

返回 mixin：

```less
// detached ruleset with a mixin
@detached-ruleset: { 
    .mixin() {
        color: blue;
    }
};
// call detached ruleset
.caller {
    @detached-ruleset(); 
    .mixin();
}
```
结果是：

```less
.caller {
  color: blue;
}
```
私有变量：

```less
@detached-ruleset: { 
    @color:blue; // this variable is private
};
.caller {
    color: @color; // syntax error
}
```
### 作用域

分离的规则集可以使用所有可访问的变量和 mixins 变量，无论是在它被定义的地方，还是在它被调用的地方。否则，定义作用域和调用者作用域均可使用。如果两个作用域都包含相同的变量或 mixin，则声明作用域的值优先。

声明范围是定义分离规则集主体的范围。将分离规则集从一个变量复制到另一个变量不能修改其作用域。规则集不会因为被引用而进入新的作用域。

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

**注意：**通过调用 mixin 将变量解锁到作用域的做法已被弃用。请使用属性/变量访问器。

#### 定义和调用者作用域可见性
一个分离的规则集可以看到调用者的变量和混合：

```less
@detached-ruleset: {
  caller-variable: @caller-variable; // variable is undefined here
  .caller-mixin(); // mixin is undefined here
};

selector {
  // use detached ruleset
  @detached-ruleset();

// define variable and mixin needed inside the detached ruleset
  @caller-variable: value;
  .caller-mixin() {
    variable: declaration;
  }
}
```
编译成：

```less
selector {
  caller-variable: value;
  variable: declaration;
}
```
定义中可访问的变量和 mixins 变量优于调用者中可访问的变量和 mixins 变量：

```less
@variable: global;
@detached-ruleset: {
  // will use global variable, because it is accessible
  // from detached-ruleset definition
  variable: @variable; 
};

selector {
  @detached-ruleset();
  @variable: value; // variable defined in caller - will be ignored
}
```
编译成：

```less
selector {
  variable: global;
}
```
#### 引用不会修改分离的规则集作用域
规则集不会因为被引用而获得新作用域的访问权限：

```less
@detached-1: { scope-detached: @one @two; };
.one {
  @one: visible;
  .two {
    @detached-2: @detached-1; // copying/renaming ruleset 
    @two: visible; // ruleset can not see this variable
  }
}

.use-place {
  .one > .two(); 
  @detached-2();
}
```
就会出错：

```less
ERROR 1:32 The variable "@one" was not declared.
```
#### 解锁将修改分离的规则集作用域
分离的规则集通过在作用域内解锁（导入）而获得访问权：

```less
#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();
}
```
编译成：

```less
.use-place {
  scope-detached: value;
}
```
### 属性/变量访问器

（查找值）
发布于 v3.5.0

从 Less 3.5 开始，你可以使用属性/变量访问器（也称为 "lookups"）从变量（分离的）规则集中选择一个值。

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

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

.box {
  .mixin();
}
```
输出：

```less
.box {
  selected: value;
}
```
如果查询返回的是另一个分离的规则集，则可以使用第二次查询来获取该值。

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

.box {
  color: @config[@colors][primary];
}
```
#### 查找中的可变变量
返回的查找值本身可以是变量。比如，你可以写：

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

.box {
  @lookup: dark;
  color: @config[@@lookup][primary];
}
```
这将输出：

```less
.box {
  color: darkblue;
}
```