LESS에 "확장"기능이 있습니까?


93

SASS에는 @extend선택기가 다른 선택기의 속성을 상속 할 수 있도록 하는 기능이 있지만 속성 (예 : mixins)을 복사하지 않습니다.

LESS에도이 기능이 있습니까?


설명을 위해 다른 질문 참조는 동일한 질문을하지 않습니다. 이 질문은 간단합니다. "LESS에 확장 기능이 있습니까?" 다른 질문은 스타일링 결정에 대해 훨씬 더 많은 생각이 필요한 것을 묻는 것입니다.
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의 구문은 @extendSASS 및 Stylus에서 구현 한 at-rule ( ) 구문 보다 기존 CSS에 더"충실 "합니다. 일반적으로 브라우저의 CSS 파서에 지침이나 지시문을 제공하기 위해 예약되어 있습니다." <-도대체이게 무슨 뜻이야? 마케팅과 같은 냄새가납니다.
cimmanon 2013 년


2
@cimmanon 나는 당신이 옳다고 생각합니다, 나는 그렇게 들리는 것을 의미하지 않았습니다. 그러나 사람들이 Less가 SASS와 동일한 구문을 사용하기를 기대했기 때문에 Less의 구문에 대해 많은 논란이 있습니다. 그러나 CSS에서 pseuso-selector는 문서 트리의 요소에 적용되는 스타일 규칙을 결정하기 위해 패턴 일치 규칙에 사용되는 반면 at-rule은 "상위 수준"지시문 (앞서 언급했듯이)에 사용됩니다. 그렇다면 그 세부 사항을 제공하기 위해 답변을 편집해야할까요? 아니면 또 다른 질문입니다. "왜 LESS가 의사 선택기 구문을 선택 했습니까?"
jonschlinkert 2013 년

4
당신은 정말 대해 아무것도 볼 수없는, 온라인 적은 문서를 업데이트해야합니다 : (연장)를 그리고 이전 알고 좋은했을
여호수아 Bambrick

2
코드와 마찬가지로 문서는 커뮤니티에서 유지 관리됩니다. 제안 이러한 종류의 실제의 repo에 가지고 좋은 것, 그리고 풀 요청은 항상 ;-) 환영
jonschlinkert

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.