从另一个类的另一个属性继承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.3x，背景颜色为蓝色。

Answer 2

是的..你不能在CSS中使用这样的依赖关系。 你必须使用SASS或LESS ..

你可以在SASS中做到这一点

.class1 {
     line-height:20px;
    }

.class2 {
   @extend.class1
}