[css] LESS에 “확장”기능이 있습니까?

예, Less.js extend는 v1.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;
}

중첩 된 선택자를 확장 할 때 차이점을 확인해야합니다.

중첩 된 선택기 .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;
}

답변

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

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