Sass是否具有开关功能？

有了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参考资料中找不到与此相关的任何内容。

Sass不支持开关盒

Sass仅支持四个控制指令：

• @如果

• @为了

• @各

• @当

---

不，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

---

Case只是一个伪装的if/else。这是如何回答被问到的问题的呢？我提供了一种在SASS中使用switch语句的替代方法，以一种很多人都不会想到的方式使用SASS映射。我已经删除了关于从SASS映射生成CSS的答案中不相关的部分。只是提供了一个比一堆if/else语句更干净的替代方案。这个解决方案是一个很好的替代方案。@Vladyn请尝试将此混合用于媒体查询。我认为这是互联网上最强大的媒体查询工具