Question

我有一个可更换的调色板。

$blue, $green, $red, $purple, ...

我正在合并多数民众赞成并制作一张地图；

$colors: ();
$colors:
map-merge(
    (
        "grey": $grey,
        "blue": $blue,
        "violet": $violet,
        "purple": $purple,
        "pink": $pink,
        "red": $red,
        "orange": $orange,
        "yellow": $yellow,
        "olive": $olive,
        "green": $green,
        "teal": $teal
    ),$colors
);

我写了一个函数来调用它们，

@function color($key: "blue") {
  @return map-get($colors, $key);
}

然后我使用自举颜色级功能（用于变体）：生成的色调会通过黑白变亮和变暗。

@function color-level($color-name: "blue", $level: 0) {
  $color: color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $color-interval);
}

我在一张地图中设置了变体级别。

$levels: ();
$levels:
map-merge(
    (
        "100": -8,
        "200": -6,
        "300": -4,
        "400": -2,
        "500": 0,
        "600": 2,
        "700": 4,
        "800": 6,
        "900": 8
    ),$colors
);

我现在需要使用colors()和levels()创建新的变体图。就像下面的地图代码一样：

$color-variants :

[
"grey-100": $grey-100,
"grey-200": $grey-200,
"grey-300": $grey-300,
...
"blue-100": $blue-100,
"blue-200": $blue-200,
"blue-300": $blue-300,
...
...
...
]

但是我尝试的所有方法都失败了...如何合并？

它在@each中工作，但是我需要静态变量。

我的最终代码：Codepen

Answer 1

您不能插入变量名。

您可以为每个变量声明占位符类，然后从该类扩展它，这样您就可以在循环之后使用它：

@each $name, $value in $colors {

    @each $tone, $level in $levels {

      %#{$name}-#{$tone}{
        background: color-level( #{$name} , $level);
        color: color-contrasted(color-level( #{$name} , $level));

        &:hover {
          background: 
            color-level( 
              #{$name} , 
              if(abs($level) >= 0, abs($level)-1, abs($level)+1)
            );
        }

        &:before {
          content: "#{$name} #{$tone}";
        } 

      }

      .#{$name}-#{$tone}{
        @extend %#{$name}-#{$tone}
      }

   }
}

并在您的项目中使用它，例如：

.a-div{
  @extend %pink-600; // use any color variant
}

Answer 2

不能包含变量名，您可以尝试 @extend

Sass自动使用变量制作颜色变体

2 个答案: