css - LESS デタッチドルールセット vs ノンパラメトリックミックスイン

Question

切り離されたルールセットの間に実質的な違いはありますか?

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

ノンパラメトリックミックスイン？例えば

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

ネストされた演算子と同じように動作しますか?

最も明白な違いは構文 (ルールセットにはセミコロンが必須) であり、ルールセットは変数をプライベートに保ちますが、私が見つけたのはそれだけです。マニュアルでは、その詳細についてはあまり詳しく説明されていません。

score 6 · Accepted Answer

切り離されたルールセットは変数です。Less の変数の場合、最後の宣言が優先され、変数は遅延ロードされます。

再利用可能なコードの場合、同じ名前で 2 番目の mixin() を定義することにより、.mixin() を簡単に拡張できます。

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

.mixin() {
  color: red;
}

上記で切り離されたルールセットを使用する場合、すべてのプロパティを繰り返す必要があります。これにより、2 番目の宣言が最初の宣言をオーバーライドします。

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

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

css - LESS デタッチド ルールセット vs ノンパラメトリック ミックスイン