scss中未定义的变量答案

【问题标题】：Undefined variable in scssscss中未定义的变量
【发布时间】：2022-01-03 07:18:09
【问题描述】：

我有一些这样的变量：

$shadow-depth-1: 0 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 3px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);

$shadow-depth-2: 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);

$shadow-depth-3: 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);

$shadow-depth-4: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);

我创建了一个 mixin 来操作这些变量。

@mixin createShadow($depth) {
   $shadow: $shadow-depth-$depth;
}

但是scss编译器给了我一个错误Undefined variable

我试过了

@mixin createShadow($depth) {
   $shadow: #{$shadow-depth-#{$depth}};
   
   box-shadow: $shadow;
}

它也给了我一个错误。

我试图在官方文档中找到一些有用的信息，但一无所获。

我在less找到你可以这样做

.create-shadow(@depth) {
    @shadow: 'shadow-depth-@depth';
    box-shadow: @@shadow;
}

所以，我想问一下scss怎么实现？

【问题讨论】：

标签： html css sass less

【解决方案1】：

这是不可能的，在 SASS 文档中有提到：https://sass-lang.com/documentation/variables#advanced-variable-functions

用户偶尔想使用插值来定义变量名基于另一个变量。 Sass 不允许这样做，因为它使很难一眼看出哪些变量是在哪里定义的。但是，您可以做的是定义一个从名称到您的值的映射然后可以使用变量访问。

解决方案是使用map 和map-get。

【讨论】：

【解决方案2】：

我没有找到任何可以像 less 一样编码的解决方案，但我们可以像这样使用Maps

$shadow-depth-1: 0 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 3px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);

$shadow-depth-2: 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);

$shadow-depth-3: 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);

$shadow-depth-4: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);

$shadow-depth: (
        shadow-depth-1: $shadow-depth-1,
        shadow-depth-2: $shadow-depth-2,
        shadow-depth-3: $shadow-depth-3,
        shadow-depth-4: $shadow-depth-4,
);

在 mixin 中，我们可以这样编码

@mixin createShadow($depth) {
  $shadow: map-get($shadow-depth, shadow-depth-#{$depth});

  box-shadow: $shadow;
}

【讨论】：