Sass Mixin: Callback o Replace @content

Question

Non so se Sass è in grado di farlo, ma non fa male a chiedere.

Il problema

Fondamentalmente ho tre pattern di colori che si ripetono in più sezioni di applicazione, come blue, green e orange. A volte quello che cambia è la background-color, o border-color del componente ... A volte è il testo color di un elemento figlio, ecc

Quello che ho pensato?

1. Sostituire un motivo di stringa all'interno di un contenuto.

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

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

2. Fornendo una variabile callback per @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; 
} 

Ho cercato di attuare tali soluzioni, ma senza successo.

Invece di esso ...

Vedere sotto la mia soluzione per farlo parzialmente di lavoro:

@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)}; 
     } 
    } 
    } 
} 

È possibile utilizzare questo mixin in questo modo:

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

ciò che verrà uscita:

.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; 
} 

Il problema? Beh, non posso usarlo con i selettori figlio.

---

Sulla base delle informazioni di cui sopra, v'è una certa soluzione magica per questo caso?

Answer 1

Penso di aver capito cosa volevi dire; è un po '(molto) disordinato, ma dovrebbe fare quello che vuoi:

@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)}; 
       } 
      } 
     } 
    } 
} 

sarebbe andata a finire per essere:

/* -------------- 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; 
} 

Speranza che questo è ciò che state cercando :)