Sass 有开关功能吗？答案

【问题标题】：Does Sass have a switch function?Sass 有开关功能吗？
【发布时间】：2013-05-07 03:29:09
【问题描述】：

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

【问题讨论】：

Case 只是变相的 if/else。

标签： sass compass-sass

【解决方案1】：

Sass 不支持 Switch Case。

Sass 只支持四个控制指令：

@if
@for
@each
@while

【讨论】：

Github 问题：github.com/sass/sass/issues/554（已关闭）

【解决方案2】：

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

【讨论】：

我提供了一种在 SASS 中使用 switch 语句的替代方法，它以一种很多人不会想到的方式使用 SASS 映射。我已经删除了关于从 SASS 地图生成 CSS 的答案中不相关的部分。
因此，答案不仅仅是“不可能”，而是“不可能，但你可以试试这个”
只是提供一个比一堆 if/else 语句更简洁的替代方案。
我认为这是一个很好的技术。我什至会使用 sass 映射来重构一些 mixin 以进行媒体查询。谢谢！
@Vladyn 试试这个 mixin 来进行媒体查询。 npmjs.com/package/mq-scss我认为它是互联网上最强大的媒体查询 mixin。