less - 在 less 中为选择器使用变量名

Question

有没有办法使用变量名来存储选择器并使用它？

#master #leftcontent div,
#master #rightcontent div{
    background-color: #fff;    
}

#master #leftcontent a,
#master #rightcontent a{
    color:blue;    
}

是否可以将#master #leftcontent 存储在变量中并引用它

Answer 1

是的，这可以做到

这适用于 LESS 1.3.1+。您可以更改字符串，但这只是可以完成的一种方式的示例：

较少的

@selector1: ~'#master';
@selector2: ~'@{selector1} #leftcontent';
@selector3: ~'@{selector1} #rightcontent';

@{selector2} div,
@{selector3} div { 
   background-color: #fff; 
}

@{selector2} a,
@{selector3} a { 
   color: blue; 
}

CSS 输出与您在问题中显示的完全一样。

Answer 2

如果您来到这里希望将媒体查询选择器放在一个较少的变量中（这就是我来到这里的方式），您可以这样做：

@phone-width: 600px;
@phone: ~"screen and (max-width: @{phone-width})";

@media @phone {
  background-color: white;
}