css - 将变量作为选择器的 SASS mixin

Question

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

SASS 是否有一种方法可以将“状态”变量传递给混入，然后将该混入用作选择器？

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