在SCSS中使用标签的剥离变量，然后在选择器中使用它们

Question

这里的另一个问题。我的团队想使用不同宽度，颜色和位置的边界。所以，我做到了：

$position-list: top right bottom left;
$colors-list: fff ccc ddd eee;

 @for $i from 1 through 3 {
   @each $position in $position-list {
        @each $color in $colors-list {
            .border-#{$position}-#{$i}-#{$color} {
                border-#{$position}: #{$i}px solid #{"#"}#{$color} !important;
    }
   }
  }
 }

这很棒，但是，我想将颜色作为我的颜色的变量包括在内。问题在于颜色的主题标签也将传输（$ dark-color：＃000），因此它很可能会生成一个怪异的选择器（.border-top-1-＃000）或不't完全编译。

是否有一种方法可以将变量从颜色上剥离。Scss表板的主题标签之前，将它们放入选择器中？还是有人有不同/更好的方法？

Answer 1

我们可以将颜色转换为字符串（#inspect）并切成薄片（#str-slice）。

$dark-color: #000;
$light-color: #fff;
$abc-color: #abc;
$position-list: top right bottom left;
$colors-list: $dark-color $light-color $abc-color;
@for $i from 1 through 3 {
    @each $position in $position-list {
        @each $color in $colors-list {
            $stripped-color: str-slice(inspect($color), 2);
            .border-#{$position}-#{$i}-#{$stripped-color} {
                border-#{$position}: #{$i}px solid #{$color} !important;
            }
        }
    }
}

输出（示例）：

.border-top-1-abc {
    border-top: 1px solid #abc !important;
}