css - 检查变量是否包含在 SCSS 的单词列表中

Question

在 SCSS 混合定义中，我想检查一个参数是否是预定义的字符串之一。在下面的示例中，我如何创建一个条件来检查 $arg 是 "foo"、"bar" 还是 “巴兹”？如果没有，我想提出一个错误。

@mixin my-mixin($arg){
  @if some-condition {
    @error "argument must be `foo`, `bar`, or `baz`."
  };
  ...
}

Answer 1

到目前为止，还没有内置的方法来实现这一点。但是，您可以简单地编写自己的 @function (例如称为 in_list¹)，它使用 index()检查 value 是否存在的方法在list如下:

/**
 * in_list — Checks if a value exists in a list
 *
 * @param  $value the needle
 * @param  $list  the haystack
 * @return boolen TRUE if $value is found in the $list, FALSE otherwise.   
 */
@function in_list($value, $list) {
    @return (false != index($list, $value));
}

例如:

$list: foo, bar, baz;
$val: qux;

 ...
@if in_list($val, $list) {
    // do something
} @else {
    @error "$val argument must exist in #{$list}; was '#{$val}'";
}

---

^{1。函数名称和语法的灵感来自 PHP in_array()函数。}