在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+。你可以改变字符串，但这只是一种可以做到的方式的例子：

<强> LESS

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

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

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

CSS输出与问题中显示的完全一致。

Answer 2

如果您来这里是想将媒体查询选择器放在一个 less 变量中（我就是这么来的），您可以这样做：

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

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