在Sass中将伪类与变量一起使用

Question

我一直无法全神贯注于如何执行这个想法，因为我已经在Sass中使用带有变量的伪类。

我的情况

我正在创建一个包含多个input[type=text]字段和input[type=email]字段的表单，对于这些字段，我想创建normal ， hover和focus状态。

因此，编译后的CSS如下所示：

input[type=text],
input[type=email] { background:#eee; }

input[type=text]:hover,
input[type=email]:hover { background:#aaa; }

input[type=text]:focus,
input[type=email]:focus { background:#666; }

所以我创建了这个变量：

$inputs: "input[type=text], input[type=email]";

对于normal状态，我有：

#{$inputs} { background:#eee; }

因此，在我幼稚的想法中，我认为执行#{$inputs}:hover { background:#aaa; } #{$inputs}:hover { background:#aaa; }可以工作...但是它当然不能，Sass不能只是“猜测”我想要的东西：p

这就是为什么我在这里。

题

关于如何在上述变量中​​使用伪类的任何建议？

任何帮助和指导将不胜感激。

谢谢。

Answer 1

我会为此：

input[type=text],
input[type=email]
{
   background:#eee;

   &:hover
   {
       background:#aaa;
   }

   &:focus
   {
       background:#666;
   }

}

这是演示小提琴： http : //jsfiddle.net/ApxSB/

正如@ricardozea所说，您也可以将选择器放在这样的变量中：

$inputs: "input[type=text], input[type=email]";

#{$inputs}
{
}

演示在这里： http : //jsfiddle.net/NicoO/ApxSB/1/