다른 CSS 정의에 CSS 정의를 포함 할 수 있습니까?

Question

그래서 내가 'foo.css'에서 다음 있다고 가정 해 봅시다 : 이제

.border { border : solid 1px; } 
#foo { color : #123; } 
#bar { color : #a00; } 

의 나는 내가 위해 국경을 원하는 두 div의가 있다고 가정하자, 그래서 수행

<div id="foo" class="border">Foo</div> 
<div id="bar" class="border">Bar</div> 

이 잘 작동합니다 다음

.border { border : solid 1px; } 
#foo { 
    <incantation to inherit from .border> 
    color : #123; 
} 
#bar { 
    <incantation to inherit from .border> 
    color : #a00; 
} 

내 HTML 하시다을 :하지만 내 CSS 파일에 #foo와 #bar을 정의 할 때 사업부는 클래스의 줄보다, 차라리 그들에게 .border의 특성을 줄 것과 같이 찾을 단지 :

<div id="foo">Foo</div> 
<div id="bar">Bar</div> 

누구나 그 마법 주문은 무엇인지 압니까?

Answer 1

mixins with Sass. Sass를 사용하면 이와 같은 트릭을 사용하여보다 효율적인 방법으로 CSS 스타일 시트를 작성할 수 있습니다. Mixins를 사용하면 테두리 (테두리)와 같은 속성 그룹을 정의한 다음 해당 속성을 특정 CSS 클래스에 포함시킬 수 있습니다.

Answer 2

CSS에서 지원되지 않습니다. 할 수있는 최선의 방법은 다음과 같습니다.

#foo, #bar, .border { border : solid 1px; } 
#foo { color : #123; } 
#bar { color : #a00; } 

Answer 3

Wsanville이 말했듯이, 당신은 수업을 사용할 수 없습니다. 그러나 일반 CSS 상속 작업을 수행 - 당신의 HTML을

<div class="border"> 
    <div id="foo"> 
     hello 
    </div> 
    <div id="bar"> 
     world 
    </div> 
</div> 

있다면 당신은 당신이 밀어 찾고 있다면

.border {border: 1px solid #f00;} 
#foo {border:inherit;} 

어떤 경우에 어떤

Answer 4

충분 수 있습니다 말할 수 말할 당신의 CSS는 이전 게시물에서 간략히 설명한 몇 가지 트릭을 사용하는 대신 CSS 컴파일러를 살펴보아야합니다. 그들은 작성한 CSS와 비슷한 코드 (일반적으로 몇 가지 트릭이 추가 된 CSS)를 가져 와서 웹용 일반 CSS로 바꿉니다.

David Ziegler

이 멋진 기능을 갖춘 CSS 컴파일러의 일부에 대해 썼다는 다음과 같은 기능을 제공합니다

• 변수을 - 좋은 프로그래머가 하드 코딩 좋아하지 않는다. 좋은 상속을 사용하여 CSS에서 이것을 피할 수 있지만 때로는 피할 수없는 경우가 있습니다. 변수를 사용하면 색 구성표를 변경하면 13 개의 속성 대신 하나의 변수가 업데이트됩니다.

• 수학 - 이것은 변수와 함께 사용됩니다. 왼쪽 열이 100 픽셀이고 오른쪽 열이 500 픽셀이고 래퍼 div가 600 픽셀이라고 가정 해 보겠습니다. 음, 아마도 960 픽셀로 변경하기로 결정했을 것입니다. 기둥의 너비가 자동으로 조정되면 정말 좋지 않겠습니까? 대답은 '예'입니다.

• 중첩 된 스타일 - 이것은 아마도 가장 중요합니다. CSS는 평평합니다. 복잡한 사이트는 끝까지 통증이있는 ​​CSS로 끝납니다.

당신은 자신의 blog post on the subject에 대한 인기 컴파일러를 읽거나 어떤 검색을하고 가장 적합한 하나를 찾을 수 있습니다.