2012-02-02 2 views
0

나는이 같은 dotLess '믹스 인'을 사용하고 있습니다로 시작하는 선택과 믹스 인이 잘 작동점이없는은 - 태그 이름

.base-button-style 
{ 
    ... 
} 

.specific-button-style 
{ 
    .base-button-style; //mixin 
    ... 
} 

. 하지만 지금은 태그 이름을 추가하여 그것을 더 높은 우선 순위를 부여하는 기본 스타일의 선택을 변경해야하지만

input.base-button-style 
{ 
    ... 
} 

을 점이없는이 맘에 들어하지 않는 것, 그래서 .less 파일이 없습니다 전혀 "파싱"된다.

input.base-button-style 
{ 
    ... 
} 

.specific-button-style 
{ 
    input.base-button-style; 
    ... 
} 

(. 즉, 기본 스타일 모두에서 태그 이름을 갖는 곳은 믹스 인으로 사용됩니다)

가 있습니까 : 나는 더 나은 결과이로 변경 시도했습니다 이 일을하는 방법?

내 HTML에는 기본 단추 스타일과 특정 단추 스타일이 모두 사용됩니다.

답변

2

mixins에 선택자를 사용할 수 있는지 확실하지 않습니다. 왜냐하면 실제로 최종 코드에서 제거 된 함수이기 때문입니다.

그것은 당신의 .specific-button-style이 같은 .base-button-style에서 둥지에 더 좋을 수도 :

.button { 
    display: inline-block; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    padding: .5em 2em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.2); 
    .border-radius(.5em); 
    .box-shadow(0, 1px, 2px, rgba(0,0,0,.2)); 
    font-weight:bold; 
    font-size:15px; 

    @button-color: #faa51a; 
    &.edit, &.orange{ 
     .button-normal(@button-color); 
     &:visited {.button-normal(@button-color);} 
     &:hover {.button-hover(@button-color);} 
     &:active {.button-active(@button-color);} 
    } 
} 

& 다음 .edit.orange 클래스의 연산자는 효율적으로 .button.edit.button.orange 클래스를 생성합니다. 따라서 HTML 요소는 class='button edit'입니다. 그건 IE7 +, 그리고 모든 일반적인 다른 작동합니다.

+0

나는 당신보다 다른 해결책을 사용했으나 &에 대한 팁을 주셔서 감사합니다! 믹스하는 클래스가 클래스 이름 이외의 선택을 가질 수 없다는 것이 옳은 것 같습니다. – haagel

+1

어떤 솔루션을 사용 했습니까? –

관련 문제