Удаление переменных хэштега в 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;
    }
   }
  }
 }

Это прекрасно работает, однако я хочу включить цвета в качестве переменных из моего листа colors.scss ($ light-color, $ dark-color и т. Д.). Проблема в том, что хештеги из листа colors.scss также будут перенесены ($ dark-color: # 000), поэтому он, скорее всего, сгенерирует странный селектор (.border-top-1- # 000) или не делает ' t компилируется вообще.

Есть ли способ убрать переменные из листа 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;
}