SASS 与变量混合作为选择器

Question

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

是否有 SASS 的方法，您可以将 "state" 变量传递给混入，然后将该混入用作选择器？

这是我在 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.

在没有 mixin 的情况下执行此操作

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 文档中所述，mixins 必须包含声明。

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for transform.

因此，如果 mixin 的属性不包含任何值，则会产生错误。

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

@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 与变量混合作为选择器

SASS mixin with variable as selector

css

sass

mixins