指南针 - 包含另一个属性的一个值

Question

我想要包含来自另一个类的值 - 并将其用于不同的东西：

我有这堂课：

.sourceClass {
  color: red;
}

我有这堂课：

.destinationClass {
  border-color: ###should be the color from .sourceClass => red
}

这可能吗？我怎么能这样做？

Answer 1

您使用＆＃34; Sass＆＃34;标记了您的帖子。您使用的是Sass / SCSS预处理器吗？如果是这样，您将声明并使用如下变量：

$myColor: red;

.sourceClass { color: $myColor; }
.destinationClass { border-color: $myColor; }

如果您不使用Sass，可以阅读native CSS variables - 目前在Firefox和Chrome中有效，但not IE/Edge。

最后，所有当前浏览器都支持一种可能的解决方案，这取决于您的DOM层次结构：currentColor。

如果您的.destinationClass是.sourceClass的孩子，因此继承了color: red，您只需使用border-color: currentColor获取该颜色并将其用作边框颜色

希望这有帮助！