Sass Mixin: 回调函数或替换@content

Question

Sass Mixin: 回调函数或替换@content

sassmixins

7

我不知道Sass是否能够实现这一点，但询问一下也无妨。

问题是：我有三种颜色模式在应用程序的多个部分中重复出现，如蓝色、绿色和橙色。有时更改的是组件的背景颜色或边框颜色，有时是子元素的文本颜色等。

我的想法是：

1. 替换内容中的字符串模式。

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

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

2. 为@content提供一个回调变量。

注：本段翻译涉及IT技术，如有不当之处请指正。

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

您可以这样使用此混合：

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

问题是什么？我无法使用它与子选择器一起使用。

基于以上信息，是否有某种神奇的解决方案？

- Caio Tarifa

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Keegan G · Accepted Answer

我想我理解了你的意思；虽然有点（非常）混乱，但它应该能够满足你的要求：

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

希望这就是您要找的 :)