Question

我的目标是设置大量需要大量代码的输入类型的样式。当您还声明输入具有的各种状态时，大部分将被重用。

在SASS中是否存在一种方法，您可以将“状态”变量传递给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

您可以使用the sass ampersand，而无需混入。

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

您正在滥用sins，如sass文档中所述，x插件必须包含声明。

CSS中的某些内容编写起来有些繁琐，尤其是在CSS3中以及存在的许多供应商前缀。混入让您分组您要在整个网站中重复使用的CSS声明。您甚至可以传递值来使您的混合更灵活。很好用 mixin用于供应商前缀。这是一个转换示例。

因此，如果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示例。

使用变量作为选择器的SASS mixin

2 个答案: