css - 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），但我宁愿只使用一个。

score 4 · Accepted Answer

当你写这个：

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

1 回答 1