SCSS：为变量分配两个值

Question

我正在使用this mixin来生成媒体查询。 mixin通过插入两个值（最小宽度和可选的最大宽度）来工作：

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

问题是难以记住最大/最小宽度值。我宁愿插入关键字变量。

E.g。

$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; }
}