Sass Mixin:回调或替换@content

Question

我不知道萨斯是否能够做到这一点,但问问题并没有什么坏处.

问题

基本上我有三种颜色模式,在应用的多个部分重复,比如blue,green和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)};
      }
    }
  }
}

你可以这样使用这个mixin:

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

希望这就是您正在寻找的:)