Sass Mixin: Обратный звонок или замена @content

Question

Я не знаю, может ли Сасс это сделать, но это не помешает спросить.

Проблема

В принципе у меня есть три цвета шаблона, которые повторяются в нескольких разделах приложения, как bluegreen, и 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; 
} 

Надеется, что это то, что вы ищете :)