SASS混合与变量作为选择器

Question

我的目标是设计一堆需要大量代码的输入类型。当您还声明输入具有的各种状态时，其中大部分都会被重用。

有没有一种使用 SASS 的方法，您可以将"状态"变量传递给 mixin，然后将该 mixin 用作选择器？

这是我在 https://www.sassmeister.com 插入以进行测试的(非工作(代码。

@mixin inputs($state) {
input[type="text"]$state;
input[type="email"]$state;
input[type="url"]$state;
input[type="search"]$state;
input[type="date"]$state;
input[type="time"]$state;
/* etc */
}
@include inputs() {
border:2px solid #ccc;
}
@include inputs(:hover) {
border:2px solid #000;
}
@include inputs(:focus) {
border:2px solid blue;
}
@include inputs(:active) {
border:2px solid red
}

Answer 1

您可以使用 sass & 符号在没有混音的情况下执行此操作。

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"] {
border:2px solid #ccc;
&:hover {
border:2px solid #000;
}
&:focus {
border:2px solid blue;
}
&:active {
border:2px solid red;
}
}

Answer 2

你滥用了mixins，如sass文档中所述，mixin必须包含声明。

CSS 中的一些东西写起来有点乏味，尤其是使用 CSS3 以及存在的许多供应商前缀。混合可以让你组成组 要在整个站点中重复使用的 CSS 声明。你 甚至可以传入值，使您的混音更加灵活。一个很好的用途 的混合用于供应商前缀。下面是转换的示例。

因此，如果 mixins 不包含其属性的值，则会产生错误。

如果您还原逻辑，它将起作用。您也可以向我的示例添加更多变量，例如边框大小或类型。

@mixin inputBorder($color) {
border: 2px solid $color;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"] {
@include inputBorder(#ccc);
&:hover {
@include inputBorder(#000);
}
&:focus {
@include inputBorder(blue);
} 
&:active {
@include inputBorder(red);
}
}

如果您只想更改边框颜色，也可以使用@josephWebber示例。