css - LESS には「拡張」機能がありますか?

Question

SASSには、@extendセレクターが別のセレクターのプロパティを継承できるようにする機能がありますが、プロパティをコピーする必要はありません（ミックスインなど）。

LESSにもこの機能がありますか？

Answer 1

はい、v1.4.0extendで導入されたLess.jsです。

:extend()

SASS と Stylus で使用される @-rule ( ) 構文を実装するのではなく@extend、LESS は擬似クラス構文を実装しました。これにより、LESS の実装にセレクター自体に直接適用するか、ステートメント内に適用する柔軟性が得られます。したがって、これらの両方が機能します。

.sidenav:extend(.nav) {...}

また

.sidenav {
    &:extend(.nav);
    ...
}

さらに、allディレクティブを使用して、「ネストされた」クラスを拡張することもできます。

.sidenav:extend(.nav all){};

そして、拡張したいクラスのカンマ区切りのリストを追加できます:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

ネストされたセレクターを拡張すると、違いに気付くはずです。

ネストされたセレクター.selector1とselector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

今.selector3:extend(.selector1 .selector2){};出力：

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

、.selector3:extend(.selector1 all){};出力:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

、.selector3:extend(.selector2){};出力

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

そして最後に.selector3:extend(.selector2 all){};：

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}