Css - CSS 스킨 사용 필요 (연장 사용)

WP 테마 용 스킨을 만들어야하므로 유사한 속성 (예 : '색상')을 가진 모든 선택기를 그룹화해야합니다.Css - CSS 스킨 사용 필요 (연장 사용)

어떤 조언을 통해 CSS 스킨과 같은 것을 만들 수 있습니까? 나는이 솔루션 결국 ...

h1, h2, h3, h4, h5, h6{ 
    &:extend(.heading-color); 
    font-size: 12px; 
} 

.another-selector{ 
    &:extend(.heading-color); 
    font-size: 24px; 
} 

.heading-color{ 
     color: red; 
}

이 출력 :

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-size: 12px; 
} 
.another-selector { 
    font-size: 24px; 
} 
.heading-color, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.another-selector { 
    color: red; 
}

이 완벽하게 내가 '가짜'클래스 '.heading 색'을 만드는 데 필요한 것을 제외하고 작동합니다. 이것은 좋은 방법입니까, 아니면 뭔가 빠졌는가요?

출처

2014-08-27 Dee

이 경우 매우 확장 할 필요가 없습니다. [this] (http://codepen.io/hari_shanx/pen/ngsDH)와 같이 처리 할 수도 있습니다. CSS 출력에 추가 클래스가 생성되지는 않습니다. – Harry

물론 그렇습니다.하지만 처음에는 비슷한 셀렉터를 그룹으로 묶는 singolar 속성이 필요합니다. 예제에서는 'color : red'가 시간 상에만 반복됩니다. CMS 등으로 쉽게 재정의 할 수 있습니다. – Dee

그런 bloating 결과가 "CMS로 대체"할 가치가 있는지 의심 스럽습니다. (원래 3 개의 클래스와 99 개의 속성이 필요하다면 대신 99 개의 선택기 그룹을 생성해야합니까?)하지만 다른 방법이 있어야합니다. 그것은 모두 당신이 "CMS로 대체"함으로써 정확히 무엇을 의미하는지에 달려 있습니다). 어쨌든 이러한 더미 클래스를 ['reference'] (http://lesscss.org/features/#import-options-reference) 옵션을 사용하여 가져온 별도의 파일로 옮겨서 제거 할 수 있습니다. 예를 들어 [https://github.com/seven-phases-max/less.curious/blob/master/articles/rbgi.md#method-3-emulating-1177] –

.less 파일에 "가짜 클래스"를 쓴 다음 @import (reference)을 사용할 수 있습니다.

fake.less :

.fake { 
    color: red; 
}

real.less :

@import (reference) "fake.less"; 

.real { 
    &:extend(.fake); 
}

real.css :

.real { 
    color: red; 
}

말대꾸는 이런 종류의 더 편리 자리 지원 대본. 적은 기여자가 1 년 넘게 비슷한 기능 (우선 순위가 높은 것은 https://github.com/less/less.js/issues/1177 참조)을 구현하려고 생각하고 있습니다 ... 그래서 위의 해결 방법이 도움이 될 것 같습니다.

출처

2014-12-01 08:57:45 Justineo

Css - CSS 스킨 사용 필요 (연장 사용)

답변

관련 문제