스타일 재사용 방법은 무엇입니까?

Question

이전에는 CSS에 대해 많은 것을 배웠지 만 지금은 스타일을 재사용하는 방법을 기억하지 못합니다.

예 :

I 클래스 tab 일부 탭이 내가 자바 스크립트로 전환 할 수 있습니다. 현재 선택된 탭에는 또 다른 클래스 인 active이 있습니다.

그들의 CSS 스타일 :

.tab { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: pointer; 
    background-color: white; 
} 

.active { 
    position: relative; 
    top: 0; 
    left: 0; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: default; 
    background-color: #FFCF75; 
} 

두 스타일 2, cursor 및 background-color를 제외하고 같은 글의 스타일을 많이했다.

제 질문은 어떻게 .tab 스타일을 재사용하여 .active에서 사용할 수 있습니까?

.active { //extends .tab 
    cursor: default; 
    background-color: #FFCF75; 
} 

감사 :

나는 이런 식으로 뭔가를 달성 할 수 있습니다.

Answer 1

당신은 수, 아마도해야하므로 같은 요소에 두 클래스를 적용

<a class="tab active"></a> 

을이 두 클래스의 특정 조합에 대한 CSS 규칙을 원하는 경우에, 당신과 같이 그것을 할 것입니다 :

.tab { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: pointer; 
    background-color: white; 
} 

.active 
{ 
    cursor: default; 
    background-color: #FFCF75; 
} 

.tab.active /* no space */ 
{ 
    /* styles for elements that are both .tab and .active */ 
    /* leaving .active reusable for things other than tabs */ 
    /* and allowing override of both .tab and .active */ 
} 

이것은 당신의 스타일 선언의 불필요한 복사를 피할 수 있습니다 ... 그리고 당신에게 요소가 모두있는 경우 각각의 클래스 중 하나를 오버라이드 (override) 할 수있는 특이성을 제공합니다.

Answer 2

.tab 규칙을 .tab, .active으로 변경하십시오.

Answer 3

class 속성의 두 클래스 이름을 모두 사용하십시오. .active 규칙에서 이미 두 번째 예제와 같은 다른 스타일 만 정의하십시오.

<div class="tab active"></div> 

Answer 4

이 선택자 상속은 SASS의 유용한 기능입니다.

평범한 CSS를 고수하고 싶다면 Selector Inheritance 섹션을 보면 @extend가있는 SASS 코드가 일반적인 CSS로 바뀌는 것을 볼 수 있습니다.

Answer 5

요소에 여러 클래스를 적용 할 수 있습니다. 따라서 class = "tab active"인 요소를 가질 수 있으며 두 개의 스펙을 모두 포함해야합니다.

Answer 6

.active, .tab { 
    ... full style of both here 
} 

.active { 
    ... the styles that differ from .tab 
} 

Answer 7

이렇게하십시오. 스타일을 결합하고 쉼표로 구분하십시오. 그런 다음 차이를 타겟팅하는 다른 규칙을 추가하십시오. 귀하의 코멘트

을 바탕으로

.tab, .active { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
} 

.tab{ 
    cursor: pointer; 
    background-color: white; 
} 

.active { 
    cursor: default; 
    background-color: #FFCF75; 
} 

편집

나는 현재 클래스 속성 .active는 스타일을 추가하여 탭을 전환하고있다.

이 내가 할 것 인 것이다 :

HTML

.tab { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: pointer; 
    background-color: white; 
} 

.active { 
    cursor: default; 
    background-color: #FFCF75; 
} 

가 그럼 그냥 추가하거나 그대로 .tab을 떠나 .active 클래스를 제거

<div class="tab"></div> 

CSS.

.active이 이면 스타일 시트에서 아래로 내려 가면 필요한 비트를 덮어 씁니다.

Answer 8

1. 당신은 같은 글의 스타일 기본 클래스를 추출하고 두 개의 클래스로 구성 요소를 표시 할 수 있습니다 .tab .base
2. 당신은 당신이 결합 할 수

Answer 9

inhritance 클래스를 지원하는 sass 또는 less으로 동적 CSS 언어를 사용할 수 있습니다. .tab로 활성화하고 다음과 같이 변경해야하는 부분을 덮어 씁니다.

.tab, .active { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 15px 0 15px 0; 
    border: solid thin #CCC; 
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #272F42; 
    cursor: pointer; 
    background-color: white; 
} 

.active { 
    cursor: default; 
    background-color: #FFCF75; 
}