sass - 波本/萨斯 : #{$all-text-inputs} with hover or focus?

Question

根据Bourbon docs ， 您可以使用 #{$all-text-inputs} 将其变为:

#{$all-text-inputs} {
  border: 1px solid green;
}

进入此:

input[type="email"], input[type="number"],   input[type="password"], input[type="search"],
input[type="tel"],   input[type="text"],     input[type="url"],      input[type="color"],
input[type="date"],  input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="time"],     input[type="week"] {
  border: 1px solid green;
}

有没有办法使用 Bourbon 或 Sass 将 :hover 或 :focus 应用于每个？

#{$all-text-inputs:hover} 和 #{$all-text-inputs}:hover 不起作用。

Answer 1

您应该能够使用 Sass parent selector 嵌套 :hover 和 :focus 样式:

#{$all-text-inputs} {
  border: 1px solid green;
  &:hover, &:focus {
    // some styles
  }
}