如何使用Less在另一個類中應用concatinated類？

Question

讓我們說，我有以下數值設置：

.box { 
border: 1px solid #333; 
&.error { 
    background-color: Red;   
} 
} 

，我想聲明另一個類應用.box.error的全部風格，.error-box例如，什麼是正確的語法？

如果我使用：

.error-box { 
.box.error; 
} 

我得到的是紅色背景，無邊框。我嘗試了很多不同的組合，但是我總是得到語法錯誤。

Answer 1

我插你少像這樣：

.box { 
    border: 1px solid #333; 
    &.error { 
     background-color:red; 
    } 
} 

.error-box { 
    .box; 
} 

和CSS輸出是這樣的：

.box { 
    border: 1px solid #333; 
} 
.box.error { 
    background-color: red; 
} 
.error-box { 
    border: 1px solid #333; 
} 
.error-box.error { 
    background-color: red; 
} 

是你想要的.error盒類只接受兩種風格？我能想到的唯一辦法是：

.error-bg { 
    background:red; 
} 

.box { 
    border:1px solid #333; 
    &.error { 
     .error-bg; 
    } 
} 

.error-box { 
    .box; 
    .error-bg; 
}