SCSS：為變量分配兩個值

Question

我正在使用這個mixin來生成媒體查詢。 mixin通過插入兩個值（最小寬度和可選的最大寬度）來工作：

@include respond-to(300px,500px) {
  .this-is-not-in-ie-either { color: green; }
} 

麻煩的是，最大/最小寬度值難以記住。 我寧願插入關鍵字變量。

例如

$mob: 0, 480px;
$tab: 480px, 940px;

但是，SCSS誤解了這一點，因為最小寬度為“0,480px”，最大寬度為“未定義”。

是否可以有一個包含兩個值的變量。

我知道我可以使用兩個關鍵詞（例如$ mob-min，$ mob-max），但我寧願只使用一個。

Answer 1

當你寫這個：

$mob: 0, 480px;
@include respond-to($mob) {
  .this-is-not-in-ie-either { color: green; }
}

你實際做的是將列表作為第一個參數傳遞給mixin：

@include respond-to($mixins-first-arg: (300px,500px)) {
  .this-is-not-in-ie-either { color: green; }
}

你需要寫的是：

@include respond-to($mob...) {
  .this-is-not-in-ie-either { color: green; }
}