sass - Sass 有开关功能吗？

Question

有了 Sass 使用变量的能力，人们希望我们可以用它们来做大量的逻辑函数。

有没有办法做这样的事情？

$someVar: someValue !default;

@switch $someVar
{
    @case 'red':
        .arbitrary-css here {}

    @break;

    @case 'green':
        .arbitrary-css here {}

    @break;

    @case 'blue':
        .arbitrary-css here {}

    @break;
}

但是，我在 Sass 参考中找不到任何关于此的内容。

Answer 1

不，sass 中没有任何受支持的 switch 语句，但是如果您只需要使用 switch 语句来调整变量，则可以以 switch 语句的方式使用 sass 映射。

使用 SASS 映射代替 switch 语句

$newVar: map-get((
    case_1_test_name : case_1_return_value,
    case_2_test_name : case_2_return_value,
), $testVar);

所以这里有一个例子：

$vehicle: car;

$vehicleSeating: map-get((
    car : 4,
    bus : 20,
), $vehicle);

//$vehicleSeating = 4

上面的例子翻译成 if/else 语句：

$vehicle: car;

@if ($vehicle == 'car') {
    $vehicleSeating: 4;
} @else if ($vehicle == 'bus'){
    $vehicleSeating: 20;
}

//$vehicleSeating = 4

Answer 2

Sass 不支持 Switch Case。

Sass 只支持四个控制指令：

• @如果

• @为了

• @每个

• @尽管