Sass Mixin：回調或替換@content

Question

我不知道Sass是否能夠做到這一點，但它並沒有傷害問。

的問題

基本上我有中的重複應用的多個部分，像blue，​​和orange三種顏色圖案。有時，什麼樣的變化是background-color，或組件的border-color ......有時是文本的子元素的color等

我想什麼？

1.替換內容中的字符串模式。

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

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

2.提供回調變量@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; 
} 

希望，這是你在找什麼:)