Sass Mixin: callback or replace @content

Question

I do not know if Sass can do this, but do not ask.

Problem

Basically, I have three colors that are repeated in several sections of the application, for example blue , green and orange . Sometimes some changes are the background-color or border-color component ... Sometimes this is the color text of the child, etc.

What did I think?

1. Replace the line pattern inside the content.

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

2. Providing a callback variable for @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; } 

I tried to implement such solutions, but to no avail.

Instead of this...

See below my workaround for its partial work:

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

You can use this mixin this way:

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

What will be output:

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

Problem? Well, I can't use it with child selectors.

---

Based on the information above, is there any magic solution for this case?

Answer 1

I think I understand what you mean; it's a little (very) dirty, but it should do what you want:

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

This would turn out to be:

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

Hope this is what you are looking for :)