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

这很好用，但是，我想将颜色包括在我的colors.scss表中（$ light-color，$ dark-color等）作为变量。问题在于colors.scss工作表中的主题标签也将被转移（$ dark-color：＃000），因此它很可能会生成一个奇怪的选择器（.border-top-1-＃000），或者不会。根本无法编译。

在将它们放入选择器之前，是否可以从其hashtags的colors.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;
}

在选择器中使用它们之前，请在SCSS中剥离hashtag变量？

1 个答案: