繼承在lesscss，不繼承子類

Question

這是我style.less代碼：

.transition { 
    -ms-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 

.shadow { 
    padding: 10px 10px 10px 10px; 
    margin: 10px 10px 10px 10px; 
    -moz-box-shadow: 0px 0px 10px #808080; 
    -o-box-shadow: 0px 0px 10px #808080; 
    -webkit-box-shadow: 0px 0px 10px #808080; 
    box-shadow: 0px 0px 10px #808080; 
} 

    .shadow:hover { 
     -moz-box-shadow: 0px 0px 10px #a5a5a5; 
     -o-box-shadow: 0px 0px 10px #a5a5a5; 
     -webkit-box-shadow: 0px 0px 10px #a5a5a5; 
     box-shadow: 0px 0px 10px #a5a5a5; 
    } 


.radius { 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 

#t1 { 
    .shadow; 
    .transition; 
    .radius; 
} 

，但是當我將鼠標懸停#t1陰影不會改變。我想知道爲什麼它不工作，並期望加入#t1:hover並繼承風格是否有任何其他方式？

Answer 1

您需要更改.hover類包括:hover狀態作爲類定義的一部分：

.hover { 
    ...styles... 

    &:hover { 
     ...hover state styles... 
    } 
} 
.someOtherClass { 
    .hover; 
} 

Example

Answer 2

爲了有正確生成:hover風格，你需要連接.shadow和.shadow:hover通過&運營商所以他們歸屬在一起：

.shadow { 
    /*normal styles*/ 
    &:hover{ 
     /* hover styles */ 
    } 
} 

其餘的可以保持不變，因爲

#t1{ 
    .shadow; 
} 

現在會自動生成兩種，正常和懸停規則。

您可以在這裏嘗試一下：Online-Less-Converter

每個附加塊您通過&經營者添加到.shadow將自動適用於#t1一樣，所以如果添加另一個：

.shadow{ 
    &:hover{} 
    &.foo{ 
     /* another set of rules*/ 
    } 
} 
#t1{ 
    .shadow; /* this will now generate 3 ruleblocks for #t1*/ 
} 

的.foo規則塊也會生成#t1：

#t1{...} 
#t1:hover{...} 
#t1.foo{/* another set of rules*/}