類似類特定的造型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>