덜 : 글꼴 패밀리 변수에 글꼴 가중치를 추가하는 가장 쉬운 방법

Question

저는 스타일링에 LESS를 사용하는 시스템에서 작업하고 있습니다. 글꼴 패밀리의 변수는 다음과 같습니다.

@font-family-regular: "robotoregular", sans-serif; 
@font-family-bold: "robotobold", sans-serif; 
@font-family-condensedregular: "roboto_condensedregular", sans-serif; 
@font-family-condensedbold: "roboto_condensedbold", sans-serif; 

이제 글꼴 모음을 Arial으로 변경해야합니다. 나는 응축 된 폰트를 굴림체를 사용하려고 해요 :

@font-family-regular: Arial, sans-serif; 
@font-family-bold: Arial, sans-serif; 
@font-family-condensedregular: "Arial Narrow", sans-serif; 
@font-family-condensedbold: "Arial Narrow", sans-serif; 

문제는 내가 그런 식으로 두 개의 굵은 글꼴 스타일의 글꼴 두께를 설정할 수있다. 나는 "font-weight : bold;"를 추가 할 수있다. 수동으로 대담한 패밀리 중 하나를 사용하는 모든 스타일에 적용 할 수 있지만이를 피하고 싶습니다.

"모든 요소에 대해 : font-family가 @ font-family-bold로 설정되어 있거나 @ font-family-condensedbold가 font-weight : bold로 설정되어있는 경우"와 같은 것을 알 수있는 방법이 있습니까? 또는 그런 무엇인가? 가장 우아한 해결책은 무엇입니까?

미리 감사드립니다.

Answer 1

난 당신이 마크 업에게 결국 조금 변경해야 두려워하지만,이 내가 제공 할 수있는 솔루션입니다, 그것은 당신을 위해 일 수 있습니다

@font-family-regular: "robotoregular", sans-serif; 
@font-family-bold: "robotobold", sans-serif; 
@font-family-condensedregular: "roboto_condensedregular", sans-serif; 
@font-family-condensedbold: "roboto_condensedbold", sans-serif; 

.font-face-bold (@font-select) when 
    (@font-select = @font-family-bold), 
    (@font-select = @font-family-condensedbold) { 
    font-weight: bold; 
} 

.font-face (@size, @font-select) { 
    font: @size @font-select; 
    .font-face-bold(@font-select); 
} 


// USAGE 
.my-class { 
    .font-face(14px, @font-family-regular); 
} 

.my-bold-class { 
    .font-face(14px, @font-family-bold); 
} 

.my-condensed-class { 
    .font-face(14px, @font-family-condensedregular); 
} 

.my-condensed-bold-class { 
    .font-face(14px, @font-family-condensedbold); 
} 

내가 뭘 여기 일은 내가 만들 수 있다는 것입니다 서로 중첩 된 두 개의 믹스 인. 내부 변수는 조건부이며 전달 된 변수가 @font-family-bold 또는 @font-family-condensedbold 인 경우에만 "수행"됩니다.

위 코드의 Live Example입니다.

잘하면이 작품은 당신을 위해.