css 선택기에 변수를 덜 추가

저는 약간의 복제 양식을 제거하기 위해 처음 사용하는 초보자입니다.css 선택기에 변수를 덜 추가

ul#house-family-menu li#menu-item-97 { 
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%; 
}

: 원래 CSS를했을 의심의 소지를 없애기 위해

@current_house_id: 97; 
ul#house-family-menu li#[email protected]_house_id { 
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%; 
}

: 나는 다음과 같은 코드를 사용하여 적은 1.2.21에 (상대적으로) 복잡한 선택에 변수를 추가하기 위해 노력하고있어 이 덜에서 지원되지 않습니다 perhaphs,

Syntax Error: on line 268: expected one of [ (. # * - :: : @media @font-face , { ; got @ after: ul#house-family-menu li#menu-item-

내가 해봤 다양한 탈출 메커니즘 여기에 다른 곳에서 제안하지만 아무것도 작동하는 것 같다 없습니다 :이 lessc 컴파일 할 때

나는 오류가 얻을? 그렇지 않다면 나는 집안의 가족 메뉴 리 # 메뉴 아이템에 대해 덜 평등하게 할 수 있고 한 번에 하나씩 아이템을 적용 할 수있을 것 같니?

도움을 주시면 감사하겠습니다.

출처

2012-11-07 Jona

이 나에게 너무 많은 이해가되지 않습니다. '@ current_house_id'는 언제 변경됩니까? 왜 수업을 사용하지 않습니까? – deceze

여러 사이트에서 동일한 스타일 시트가 사용되며 여러 다른 선택기가 변수를 참조합니다. 또한 id 번호는 워드 프레스 메뉴 생성으로 설정됩니다. – Jona

CSS를 동적으로 변경하는 대신 해당 요소에서 * 클래스 *를 사용하는 것이 좋습니다. – deceze

@b: 3; 

(~'[email protected]{b}') { 
    font-size: 20px; 
}

출력 :

.tester3 { 
    font-size: 20px; 
}

귀하의 솔루션 :

@current_house_id: 97; 
(~'ul#house-family-menu li#[email protected]{current_house_id}') { }

출력 :

ul#house-family-menu li#menu-item-97 { }

편집 :은 1.4.0 베타이 (http://lesscss.org/) 변경 보인다

(~"[email protected]{index}") { ...

선택 보간이되지 않습니다는이 작업을 수행하는 대신

[email protected]{index} { ....

추가 :

선택기가 의사 요소 인 경우 예상대로 (v1.5.0 이상) 예상대로 선택기 보간을 수행 할 수 없습니다. 열기 문제 : 주위 https://github.com/less/less.js/issues/1294

일 :

이

.myMixin(@whichPseudo) { 
    @pseudo-selector: ~":@{whichPseudo}"; 
    &@{pseudo-selector} { 
     background: red; 
    } 
} 

#someEl1 { 
    .myMixin(before); 
} 

#someEl2 { 
    .myMixin(after); 
}

출처

2012-11-07 10:00:25 Patrick

css 선택기에 변수를 덜 추가

답변

관련 문제