複数の引数を1つのmixin引数に渡す

Question

mixin関数に複数の引数を渡すことは可能です。これと同じように：

@mixin exampleOne($font-family, $primary-color){ 
    .address { 
    font-family: $font-family; 
    color: $primary-color; 
    } 
} 

しかし、私はこの

@mixin exampleTwo($font-family, $primary-color...){ 
    .address { 
    font-family: $font-family; 
    color: $primary-color; 
    } 
} 

ような何かを達成したいと思いますので、それがコンパイルされます：

.address { 
    font-family: 'Avenir'; 
    color: red; 
    font-weight: 600; 
    text-transform: uppercase; 
} 

：へ

@include exampleTwo('Avenir', Red, font-weight: 600, text-transform: upperscase)

を私の質問は、 "mixinがまだそれらの引数を定義していないときに、追加の引数をmixinに渡すことは可能ですか？拡張性のためだけ。 mixinの引数に実際の "Object"を渡すことはできないと思います。あなたはそれが私の質問に答えることができます。」

希望を、これは理にかなっています。 おかげで事前に！

Answer 1

プロパティ/値のペアを保持するためにmapを使用することです、この場合に行うための最善のこと、以下のような：

(font-weight: 600, text-transform: uppercase) 

次にあなたがミックスインでマップを保持するためのパラメータを追加することができます。マップ、通じ

@mixin fonts($font-family, $primary-color, $styles){ 

、ループを、inse一緒にそれをすべて置くために

@each $property, $value in $styles { 
    #{$property}: $value; 
} 

：ルールにスタイルをrting

@mixin fonts($font-family, $primary-color, $styles){ 
    .address { 
    font-family: $font-family; 
    color: $primary-color; 

    //Loop through styles map 
    @each $property, $value in $styles { 
     #{$property}: $value; 
    } 
    } 
} 

をそして、あなたは好きそれを呼びたい：

@include exampleTwo('Avenir', Red, (font-weight: 600, text-transform: uppercase)); 

は、どの出力になります。

.address { 
    font-family: "Avenir"; 
    color: Red; 
    font-weight: 600; 
    text-transform: uppercase; 
} 

SassMeister Demo