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参考文献中没有找到关于这个的任何内容。

- Bryce

---

Case语句只是if/else的伪装形式。 - cimmanon

Answer 1

在 Sass 中，没有支持 switch 语句的功能，但如果你只需要使用 switch 语句来调整一个变量，你可以通过类似 switch 语句的方式使用 Sass maps。

使用 Sass maps 替代 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

- Daniel Tonon

---

我提供一种在SASS中使用SASS映射来替代switch语句的替代方案，这种方法许多人可能想不到。我已经删除了关于从SASS映射生成CSS的无关部分。 - Daniel Tonon

因此，与其只回答“不可能”，不如回答“虽然不可能，但你可以尝试这个”。 - Daniel Tonon

提供一种比一堆 if/else 语句更简洁的替代方案。 - Daniel Tonon

我认为这是一个很棒的技巧。我甚至会使用Sass Maps来重构一些mixin以用于媒体查询。谢谢！ - Vladyn

@Vladyn 试试这个媒体查询的mixin。https://www.npmjs.com/package/mq-scss 我认为它是互联网上最强大的媒体查询mixin。 - Daniel Tonon

谢谢@DanielTonon，这看起来很有趣。非常类似于我在最近的两个项目中使用的SASS mixin。 - Vladyn

Answer 2

Sass不支持Switch Case。

Sass仅支持四个控制指令：

• @if

• @for

• @each

• @while

- Đặng Văn Thanh

---

Github 问题：https://github.com/sass/sass/issues/554（已关闭） - Johannes Buchholz