如何在嵌套規則中定義類行爲

Question

我已經在Less中編寫了以下規則。其目的是讓span大膽，並應用到它取決於類顏色：

span { 
    font-weight: bold; 
    .cheapest { color: green; } 
    .expensive { color: red; } 
} 

受影響的文本正確應用大膽規則，但不應用顏色規則。我在Visual Studio中看到，這個被編譯成以下的CSS：

span .cheapest { 
    color: #00ff00; 
} 
span .expensive { 
    color: #ff0000; 
} 

元素和類之間的空間是想與最低或昂貴類是跨度的孩子施加的顏色元素，這不是我想要的。

我有一種方法，以較少的正確描述我想要什麼？很顯然，我可以擺脫嵌套並重復跨度選擇器，但這會擊敗Less的最大特性之一。有什麼建議？

Answer 1

span { 
    font-weight: bold; 
    &.cheapest { 
    color: green; 
    } 
    &.expensive { 
    color: red; 
    } 
} 

編譯爲：

span { 
    font-weight: bold; 
} 
span.cheapest { 
    color: green; 
} 
span.expensive { 
    color: red; 
} 

您可以閱讀有關&組合子here。