缩短 sass 问题答案

【问题标题】：Shortening sass issues缩短 sass 问题
【发布时间】：2021-11-10 09:13:57
【问题描述】：

我目前有以下 SaSS 代码

$primary: #00a1e5;
@for $i from 1 through 100 {
  @if $i % 5 == 0 {
    $percentage: $i*1%;
    .bg-primary.bg-darken-#{$i} {
      background-color: mix(black, $primary, $percentage)!important;
    }
    .bg-primary.bg-lighten-#{$i} {
      background-color: mix(white, $primary, $percentage)!important;
    }
  }
}

我现在想扩展它，以便以下内容成为可能：

我希望能够插入几个这样的颜色变量，最好收集在一个组中。
然后我希望能够对这些变量中的每一个使用变暗和变亮。
也许可以从两个语句（变暗、变亮）中得出一个集合语句
我可以复制每个变量的代码并替换变量名，但这不符合 Sass 的精神。

这里有人可以帮我编码吗？

【问题讨论】：

标签： css sass

【解决方案1】：

您可以使用map 的颜色和@each 循环：

$colorVariants: (
   primary: #00a1e5,
   secondary: #5f00e5,
   tertiary: #c94dac,
);

@each $colorName, $colorValue in $colorVariants {
   @for $i from 1 through 100 {
      @if $i % 5 == 0 {
         $percentage: $i*1%;
        
         .bg-#{$colorName}.bg-darken-#{$i} {
            background-color: mix(black, $colorValue, $percentage)!important;
         }

         .bg-#{$colorName}.bg-lighten-#{$i} {
            background-color: mix(white, $colorValue, $percentage)!important;
         }
      }
   }
}

【讨论】：