從另一個類的另一個屬性繼承css屬性

Question

有沒有辦法讓下面的工作？

.class1 { 
line-height:20px; 
} 

.class2 { 
    height: class1.line-height; 
} 

我知道css變量是要走的路，但由於它處於實驗階段，所以它不適合我們的項目。有沒有其他方法？

Answer 1

如果沒有預處理器（如SASS或LESS），則無法真正使用CSS中的依賴關係。但是，你可以將多個類的HTML .....

<div class="class1 class2"></div>

在這種情況下，class1將包含行高，然後class2將包含要應用到任何其他屬性特別的div。

class1和class2之間的任何類似屬性將允許class2優先，因爲它在class 1之後加載，假設CSS層次結構是邏輯的。

例如：

.class1 { line-height: 1.3; background-color: red;} 
.class2 { background-color: blue; } 

在div將具有1.3倍的行高和藍色的背景顏色。

Answer 2

是的..你不能在CSS中使用這樣的依賴關係。 你必須使用SASS或LESS ..

你可以像這樣在SASS

.class1 { 
    line-height:20px; 
    } 

.class2 { 
    @extend.class1 
}