Question

我一直无法解决如何执行这个想法我在Sass中使用带有变量的伪类。

我的案例

我正在创建一个包含多个input[type=text]字段和一个input[type=email]字段的表单，对于我想要创建normal，hover和{的字段{1}}州。

所以编译的CSS看起来像这样：

focus

所以我创建了这个变量：

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; }会有效......但它并不是，当然，Sass不能只是猜测＆＃34;我想要的就是：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/

在Sass中使用带有变量的伪类

1 个答案: