Question

您可以使用逗号组合CSS 选择器，例如以下示例：

＆＃13;

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

＆＃13;

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

＆＃13;

这与单独指定两个选择器具有相同的结果：

＆＃13;

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

＆＃13;

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

＆＃13;

如上所述组合选择器非常有用，因为这意味着如果要更改多个元素，只需要担心更改一个值。这对于配色方案的改变非常方便。

但是可以组合CSS 声明？

例如，让我们说我试图在一个元素中垂直集中文本，其中line-height应始终等于height：

＆＃13;

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

＆＃13;

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

＆＃13;

height, line-height: 100px;的预期合并声明并未适用任何声明，从而引发无效的属性值。

在SASS中，可以使line-height依赖于height，其简单内容如下：

$height = 100px;

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

有没有办法指定一个属性应该使用原始CSS的另一个属性使用相同的值？

Answer 1

当然可以：

＆＃13;

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

＆＃13;

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

＆＃13;

但并非所有浏览器都支持CSS变量 - http://caniuse.com/#feat=css-variables