덜 확장 속성을 참조 할 수 있습니까?

Question

확장 속성을 더 작게 확장 할 수 있습니까? 하나의 (배포 된) 파일에 정의가 있고 특수한 경우에 기존 속성에 !important을 추가해야합니다. 결과는

을해야

는 예를 들어 내가 덜 파일 정의

.pfx-grey-light-bg { 
    background-color: #e5e5e7; 
} 

내가하지만 중요한

.pfx-metro-orange-dark-bg:extend(.pfx-orange-dark-bg){ 
    //Pseudo code 
    //background-color: &extended.backgroundColor !important 
} 

에 색을 확장하는 지금이 적은 파일을 참조하고 싶습니다이 클래스가

Answer 1

아니요, 그런 식으로 하나의 속성 만 확장 할 수는 없습니다. 전체 룰 세트를 확장 할 수는 있지만 확장 할 때 선택자가 결합되므로 !important은 선택자 또는 선택자 모두에 적용해야합니다.

속성 값이 다르므로 선택기를 그룹화 할 수 없습니다. 그러나 원래 클래스의 유일한 속성 인 background-color이 파생 클래스에 적용하려는 경우 (또는) 원래 클래스의 모든 속성을 파생 클래스에 적용하고 !important을 모두 추가하려는 경우 아래에서 사용할 수 있습니다. 다음

.pfx-grey-light-bg { 
    background-color: #e5e5e7; 
} 
.pfx-metro-orange-dark-bg { 
    background-color: #e5e5e7 !important; 
} 

---

또는 귀하의 기본 클래스는 여러 속성을 가지고 있으며, 당신이 파생 된 클래스에만 background-color을 적용 할 경우 : 컴파일 할 때

.pfx-grey-light-bg { 
    background-color: #e5e5e7; 
} 

.pfx-metro-orange-dark-bg{ 
    .pfx-grey-light-bg !important; 
} 

, 그것은 다음과 같은 출력을 생성 할 다음과 같은 세 가지 옵션이 있습니다.

옵션 1 : 변수 사용

@color: #e5e5e7; 

.pfx-grey-light-bg { 
    background-color: @color; 
    color: #fff; 
} 

.pfx-metro-orange-dark-bg{ 
    background-color: @color !important; 

} 

옵션 2 : 더미 믹스 인을 작성하고 아래처럼 사용하십시오. mixin에 괄호가 있으므로 출력되지 않기 때문에 출력 CSS에 추가 코드 줄이 생기지 않습니다.

.dummy-mixin(){ 
    background-color: #e5e5e7; 
} 
.pfx-grey-light-bg { 
    .dummy-mixin; 
    color: #fff; 
} 

.pfx-metro-orange-dark-bg{ 
    .dummy-mixin !important; 
    padding: 10px; 
} 

옵션 3 : 보호 유지 mixin과 !important 여부를 추가할지 여부를 결정하는 옵션 @important 매개 변수를 사용하여 더 복잡한. 당신이 매우 긴급한 요구를하지 않는 한 나는 이것을 추천하지 않을 것입니다.

.dummy-mixin(@color, @important: no){ 
    & when (@important = no){ 
     background-color: @color; 
    } 
    & when (@important = yes){ 
     background-cokor: @color !important; 
    } 
} 
.pfx-grey-light-bg { 
    .dummy-mixin(#e5e5e7); 
    color: #fff; 
} 

.pfx-metro-orange-dark-bg{ 
    .dummy-mixin(#e5e5e7; yes); 
    padding: 10px; 
}