你可以結合CSS聲明嗎？

Question

可以通過使用逗號，如在下面的例子中結合CSS 選擇：

.one, .two { 
 
    color: #F00; 
 
}

<div class="one">One</div> 
 
<div class="two">Two</div>

這具有相同的結果獨立地指定所述兩個選擇：

.one { 
 
    color: #F00; 
 
} 
 
.two { 
 
    color: #F00; 
 
}

<div class="one">One</div> 
 
<div class="two">Two</div>

如上所述的組合選擇器非常有用，因爲這意味着如果要更改多個元素，則只需要擔心更改一個值。這對顏色方案的改變非常有用。

但是可以結合CSS 聲明？

例如，假設我想垂直集中在元素文本，其中line-height應該總是等於height：

.test { 
 
    border: 1px solid #000; 
 
    padding-left: 10px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
}

<div class="test">Test</div>

的height, line-height: 100px;預期的組合聲明不適用任何聲明，提出無效的財產價值。

在上海社會科學院，將有可能使line-height依賴height與作爲簡單的東西：

$height = 100px; 

.test { 
    border: 1px solid #000; 
    padding-left: 10px; 
    height: $height; 
    line-height: $height; 
} 

有什麼方法來指定一個屬性應該從原料CSS另一個屬性使用相同的值？當然

Answer 1

，您可以：

:root { 
 
--height: 100px; 
 
} 
 
.test { 
 
    border: 1px solid #000; 
 
    padding-left: 10px; 
 
    height: var(--height); 
 
    line-height: var(--height); 
 
}

<div class="test">Test</div>

但並不是所有的瀏覽器都支持CSS的變量 - http://caniuse.com/#feat=css-variables