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


93

SASSには、@extendセレクターが別のセレクターのプロパティを継承できるという機能がありますが、(ミックスインのように)プロパティはコピーされません。

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


明確にするために、他の質問の参照は同じことを尋ねません。この質問は簡単です。「LESSには拡張機能がありますか?」もう1つの質問は、スタイリングの決定に関してもっと多くの考慮が必要なことを尋ねることです。
jonschlinkert 2013年

...私の最後のコメントに追加するために、他の質問には、私のポイントをさらにサポートする「コーディングスタイル」タグが含まれています。
jonschlinkert 2013年

回答:


156

はい、Less.js extendv1.4.0で導入されました

: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;
}

ネストされたセレクターを拡張するときは、違いに注意する必要があります。

ネストされたセレクター.selector1selector2

.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;
}

15
「LESSの構文は@extend、SASSおよびStylusによって実装されるat-rule()構文よりも従来のCSSに「忠実」です。これは通常、ブラウザーのCSSパーサーに指示またはディレクティブを与えるために予約されています。」<-一体これはどういう意味ですか?マーケティングのようなにおいが話す。
cimmanon 2013年


2
@cimmanon私はあなたが正しいと思います、私はそれがそのように聞こえることを意味していませんでした。しかし、人々がLessがSASSと同じ構文を使用することを期待していたため、Lessの構文については多くの論争があります。しかし、CSSでは、ps-so-selectorsがパターンマッチングルールに使用され、ドキュメントツリーの要素に適用されるスタイルルールを決定します。だから私はその詳細を提供するために答えを編集する必要がありますか?それとも別の質問ですか?「なぜLESSが疑似セレクタ構文を選択したのですか?」
jonschlinkert 2013年

4
オンラインで少ないドキュメントを本当に更新する必要があります。:extend()については何も表示されません。以前に知っておくとよかったでしょう
ジョシュアバンブリック2013

2
ドキュメントは、コードと同様、コミュニティで管理されています。これらの種類の提案は実際のレポで持つのに最適です。プルリクエストはいつでも歓迎します;-)
jonschlinkert

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.