Sass Mixin: Callback or Replace @content

Question

I don't know if Sass is able to do this, but it doesn't hurt to ask.

The Problem

Basically I have three colors pattern that are repeated in multiple sections of application, like blue, green and orange. Sometimes what changes is the background-color, or the border-color of the component... Sometimes is the text color of a child element, etc.

What I thought?

1. Replace a string pattern inside a 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 without success.

Instead of it...

See below my workaround to get it partially working:

@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 that way:

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

What will come 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;
}

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

---

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

Answer 1

I think I figured out what you meant; it is a little (very) messy, 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)};
                }
            }
        }
    }
}

It 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 that that is what you are looking for :)