scss中未定义的变量

Question

我有一些这样的变量：

$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如何实现？

Answer 1

我没有找到任何可以像 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;
}

Answer 2

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

Users occasionally want to use interpolation to define a variable name based on another variable. Sass doesn’t allow this, because it makes it much harder to tell at a glance which variables are defined where. What you can do, though, is define a map from names to values that you can then access using variables.

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

scss中未定义的变量

Undefined variable in scss

html

css

sass

less