css - LESS 分离规则集与非参数混合

Question

分离规则集之间是否存在实质性差异，例如

@detached-ruleset: {
  @margin: 1px;
  margin: @margin;
};

和非参数混合？例如

.mixin() {
  @margin: 1px;
  margin: @margin;
}

它们与嵌套运算符的行为相同吗？

最明显的区别是语法（分号对于规则集是强制性的），并且规则集将其变量保持为私有，但这就是我能找到的全部。该手册没有对此进行过多的详细介绍。

score 6 · Accepted Answer

分离的规则集是一个变量。对于 Less 中的变量，最后一个声明获胜并且变量是延迟加载的。

对于可重用的代码，您可以通过定义具有相同名称的第二个 mixin() 轻松扩展 .mixin() ：

.mixin() {
  @margin: 1px;
  margin: @margin;
}

.mixin() {
  color: red;
}

在上面使用分离规则集时，您应该重复所有属性，因为第二个声明会覆盖第一个声明：

@detached-ruleset: {
  @margin: 1px;
  margin: @margin;
};

@detached-ruleset: {
  @margin: 1px;
  margin: @margin;
  color: red;
};

1 回答 1