web-dev-qa-db-ja.com

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

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

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

csscss3sasslessextend
87
jonschlinkert

はい、Less.jsが導入されました extend in v1.4. .

:extend()

LESSは、SASSおよびStylusで使用されるat-rule（@extend）構文を実装するのではなく、疑似クラス構文を実装しました。したがって、これらの両方が機能します：

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

Lessフレームワークで機能を拡張する簡単な方法

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

出力

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

参照 https://codepen.io/sprushika/pen/MVZoGB/

3
Spushika Mulakala