2011-09-28 3 views
8

하자가 '나는 다음과 같은 적은 설정이 있다고 :Less를 사용하여 다른 클래스에서 concatinated 클래스를 적용하는 방법?

.box { 
border: 1px solid #333; 
&.error { 
    background-color: Red;   
} 
} 

을 그리고 예를 들어 .error-box로, .box.error의 전체 스타일을 적용 다른 클래스를 선언하고 싶었 올바른 구문은 무엇인가?

내가 사용하는 경우 :

.error-box { 
.box.error; 
} 

내가 할 모든없이 테두리, 빨간색 배경입니다. 여러 가지 조합을 시도했지만 구문 오류가 발생합니다.

답변

16

내가 연결하여 적은 않도록 :

.box { 
    border: 1px solid #333; 
    &.error { 
     background-color:red; 
    } 
} 

.error-box { 
    .box; 
} 

과 CSS 출력이이었다

.box { 
    border: 1px solid #333; 
} 
.box.error { 
    background-color: red; 
} 
.error-box { 
    border: 1px solid #333; 
} 
.error-box.error { 
    background-color: red; 
} 

당신은 혼자로에는 .error 박스 클래스를 원하는 한 두 스타일을받을 수? 내가 생각할 수있는 유일한 방법은 다음과 같습니다.

.error-bg { 
    background:red; 
} 

.box { 
    border:1px solid #333; 
    &.error { 
     .error-bg; 
    } 
} 

.error-box { 
    .box; 
    .error-bg; 
} 
관련 문제