类似类特定的造型LESS

Question

我有下面的代码示例：

div.box { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
div.box.red { background: red; } 
 
div.box.blue { background: blue; } 
 
div.box.green { background: green; }

<div class="red box"></div> 
 
<div class="blue box"></div> 
 
<div class="green box"></div>

这是非常多余的，我正在寻找一种更有效的方式来做到这一点，我我确定你可以在LESS中做到这一点，但我不记得如何。

我认为这是箭头，但是当我使用它们时它不能按预期工作。

如果在所有LESS符号上都有一些文档，请将其链接到我，以便我可以重新熟悉自己。

编辑：寻找这样的事情：

div.box { 
 
    width: 50px; 
 
    height: 50px; 
 

 
    > .red { background: red; } 
 
    > .blue { background: blue; } 
 
    > .green { background: green; } 
 
}

<div class="red box"></div> 
 
<div class="blue box"></div> 
 
<div class="green box"></div>

感谢=）

Answer 1

您可以使用LESS & selector做到这一点：

div.box { 
    width: 50px; 
    height: 50px; 

    &.red { 
    background: red; 
    } 

    &.blue { 
    background: blue; 
    } 

    &.green { 
    background: green; 
    } 
} 

Answer 2

你根本不喜欢这样：

div.box { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.red { background: red; } 
 
.blue { background: blue; } 
 
.green { background: green; }

<div class="red box">R</div> 
 
<div class="blue box">B</div> 
 
<div class="green box">G</div>