你可以结合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