Less：フォントファミリ変数にフォントウェイトを追加する最も簡単な方法

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; 

は今、私はゴシックにフォントファミリを変更する必要があります。私が凝縮されたフォントのためのゴシックを使用するつもりです：

@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; 

問題は、私はそのように2つの太字フォントスタイルのフォントの太さを設定することができないこと、です。私は、 "font-weight：bold;"大胆なファミリのいずれかを使用するすべてのスタイルに手動で追加しますが、それを避けたいと思います。

「すべての要素に対して：font-familyが@ font-family-boldに設定されているか@ font-family-condensedbold add font-weight：bold;」のようなものをLESSに伝える方法はありますか？それとも何か？最も洗練されたソリューションは何でしょうか？

ありがとうございます。

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); 
} 

何私はここで行うことは、私が作成していることです2つのミックスインは互いに入れ子になっています。内側の変数は条件付きで、渡された変数が@font-family-boldまたは@font-family-condensedboldの場合にのみ「何か」を行います。

ここには上記コードのLive Exampleがあります。

これはうまくいきます。