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仅支持四种控制指令：

@if
@for
@each
@while

Sass有开关功能吗？

2 个答案: