scss中未定义的变量

Question

I have some variables like this:

$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);

and I create a mixin to operate these variables.

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

But the scss compiler gave me an error Undefined variable

and I tried this

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

It also gave me an error.

I tried to find some useful information in official documentation, but I gained nothing.

I find in less you can do it like this

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

So, i want to ask how to realize it in scss ?

Answer 1

This is impossible and it is mentioned in SASS documentation: 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.

The solution is using map and map-get .

Answer 2

I did not find any solutions that we can code like less, but we can use Maps like this

$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,
);

and in mixin, we can code like this

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

  box-shadow: $shadow;
}