Sass Mixin：コールバックまたは@contentを置き換える

Question

Sassがこれを実行できるかどうかわかりませんが、尋ねるのは害ではありません。

問題

は基本的に私はblue、​​とorangeのように、アプリケーションの複数のセクションで繰り返される3つの色のパターンを持っています。時には、どのような変更は、私が考えたもの

など、時々、子要素のテキストcolorです... background-color、またはコンポーネントのborder-colorのですか？

内容の中に文字列パターンを置き換えます。

.my-class { 
    @include colorize { 
    background-color: _COLOR_; 

    .button { 
     border-color: _COLOR_; 
     color: _COLOR_; 
    } 
    } 
} 

@contentのコールバック変数を提供します。

// This is just a concept, IT DOESN'T WORK. 
@mixin colorize { 
    $colors: blue, green, orange; 

    @each $colors in $color { 
    // ... 
    @content($color); // <-- The Magic?! 
    // ... 
    } 
} 

// Usage 
@include colorize { 
    background-color: $color; 
} 

私は成功せず、そのようなソリューションを実装しようとしました。その代わりの

...それは部分的に作業を取得するために私回避策以下

を参照してください：

：あなたはこのミックスインその方法を使用することができます

@mixin colorize($properties) { 
    $colors: blue, green, orange; 

    @for $index from 1 through length($colors) { 
    &:nth-child(#{length($colors)}n+#{$index}) { 
     @each $property in $properties { 
     #{$property}: #{nth($colors, $index)}; 
     } 
    } 
    } 
} 

.some-class { 
    @include colorize(background-color); 
} 

.some-class:nth-child(3n+1) { 
    background-color: blue; 
} 


.some-class:nth-child(3n+2) { 
    background-color: green; 
} 


.some-class:nth-child(3n+3) { 
    background-color: orange; 
} 

問題：何が出力来るのだろうか？さて、私は子セレクタで使用することはできません。上記の情報に基づいて

---

、この場合のために、いくつかの魔法の解決策はありますか？

Answer 1

私はあなたが何を意味しているかを考え出したと思います。それは（非常に）厄介少しですが、それはあなたが欲しいものを行う必要があります。

@mixin colorize($parentProperties,$childMaps) { 
    $colors: blue, green, orange; 

    @for $index from 1 through length($colors) { 
     &:#{nth($colors, $index)} { 
      @each $property in $parentProperties { 
       #{$property}: #{nth($colors, $index)}; 
      } 
     } 

     @each $mapped in $childMaps { 
      $elem: nth($mapped,1); 
      $properties: nth($mapped,2); 
      #{$elem}:nth-child(#{length($colors)}n+#{$index}) { 
       @each $property in $properties { 
        #{$property}: #{nth($colors, $index)}; 
       } 
      } 
     } 
    } 
} 

それがあることが判明するだろう：

/* -------------- USAGE ------------------*/ 

.some-class { 
    @include colorize(
     background-color,(        //Parent properties 
      (button, background-color),    //Child, (properties) 
      (span,  (background-color,border-color)) //Child, (properties) 
     ) 
    ); 
} 

/* --------------- OUTPUT ----------------*/ 

.some-class:nth-child(3n+1) { 
    background-color: blue; 
} 
.some-class button:nth-child(3n+1) { 
    background-color: blue; 
} 
.some-class span:nth-child(3n+1) { 
    background-color: blue; 
    border-color: blue; 
} 
.some-class:nth-child(3n+2) { 
    background-color: green; 
} 
.some-class button:nth-child(3n+2) { 
    background-color: green; 
} 
.some-class span:nth-child(3n+2) { 
    background-color: green; 
    border-color: green; 
} 
.some-class:nth-child(3n+3) { 
    background-color: orange; 
} 
.some-class button:nth-child(3n+3) { 
    background-color: orange; 
} 
.some-class span:nth-child(3n+3) { 
    background-color: orange; 
    border-color: orange; 
} 

それはあなたが:)

探しているものであることを願っています