SASSには、@extendセレクターが別のセレクターのプロパティを継承できるようにするという機能がありますが、プロパティ（ミックスインなど）をコピーする必要はありません。
LESSにもこの機能がありますか？
:extend()
@extendSASSとStylusで使用されるat-rule（）構文を実装するのではなく、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;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加