Question

我不知道Sass是否能够做到这一点，但要问他是不是很痛苦。

问题

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

希望这就是你要找的东西：）

Sass Mixin：回调或替换@content

1 个答案: