@ @include mixinと一緒に

Question

私はドロップダウンのフォントにGoogleフォント（もちろん視覚的な表現のために！）を表示するように、30フォントのドロップダウンがあります。

IDのHTMLを持っています（例：font-oswald-light、font-oswald-reg、font-oswald-bold）。 @eachディレクティブを使用して

は、私はこのような何かをやってみたかった：

@each $font-name, $font-mixin in (lato, Lato-Light), 
            (open_sans, Open_Sans-Light), 
            (oswald, Oswald-Light), 
            (raleway, Raleway-Light), 
            (roboto, Roboto-Light), 
            (source_sans_pro, Source_Sans_Pro-Light), 
            (ubuntu, Ubuntu-Light) { 
    #font-#{$font-name}-light { 
    @include #{$font-mixin}; 
    } 
} 

フォントファミリを作成します。

@import url('https://fonts.googleapis.com/css?family=......) 

@mixin Lato-Light { 
    font-family: 'Lato', sans-serif; 
    font-weight: 300; 
    font-style: normal; 
} 

@mixin Lato-Reg { 
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
    font-style: normal; 
} 

@mixin Lato-Bold { 
    font-family: 'Lato', sans-serif; 
    font-weight: 700; 
    font-style: normal; 
} 

しかし、@eachが@includeに内部が好きではありません。 font-familyを表示します。私はfont-face（）を作成するためにライブラリ（バーボン、コンパスなど）を使用していません。

私の質問は次のとおりです。@各フォントIDリストを動的に作成して、ファミリを含めるときにエラーにならないようにする方法は何ですか？

Answer 1

#font-#{$font-name}-light { 
    @include #{$font-mixin}; 
} 

まず、このコードは機能しません。補間はSassではこのようには機能しません。サスは@includeキーワードの後識別子を期待し、それがこのコードを渡って来るとき、それは、変数が表す値に$font-mixinを評価し、それはそれは、値すべてです。サスは

は、第二に、あなたがすべての単一のフォントのミックスインを作成する必要はありません識別子としてその値を解釈しません。そのアプローチは柔軟性がなく、保守性も劣ります。

mixinを使用して、fonts mapをループして、必要なCSSを動的に生成することをお勧めします。

$fonts-list:(
    lato-light: ("Lato", sans-serif) 300 normal, 
    lato-reg: ("Lato", sans-serif) 400 normal, 
    lato-bold: ("Lato", sans-serif) 700 normal, 
    oswald-light: ("Oswald", sans-serif) 200 normal, 
    oswald-reg: ("Oswald", sans-serif) 400 normal 
); 


@mixin fonts($family, $weight, $style) { 
    font-family: $family; 
    font-weight: $weight; 
    font-style: $style; 
} 

@each $font, $attributes in $fonts-list { 
    #font-#{$font} { 
    @include fonts(nth($attributes, 1), nth($attributes, 2), nth($attributes, 3)); 
    } 
} 

コンパイルCSSを使用すると、複数のフォントはすべて光のバリエーションを格納する、$fonts-light、すなわち変動に基づいてフォントを格納するをマップ持つように決定することができ、この

#font-lato-light { 
    font-family: "Lato", sans-serif; 
    font-weight: 300; 
    font-style: normal; 
} 

#font-lato-reg { 
    font-family: "Lato", sans-serif; 
    font-weight: 400; 
    font-style: normal; 
} 

#font-lato-bold { 
    font-family: "Lato", sans-serif; 
    font-weight: 700; 
    font-style: normal; 
} 

#font-oswald-light { 
    font-family: "Oswald", sans-serif; 
    font-weight: 200; 
    font-style: normal; 
} 

#font-oswald-reg { 
    font-family: "Oswald", sans-serif; 
    font-weight: 400; 
    font-style: normal; 
} 

のように見えますフォントの、$fonts-reg、すべてを格納しますのフォント...そして、それぞれ同じ方法でループすることができます。それはあなたが好む構造に依存します。私はこれが助けてくれることを願っています