Question

现在我有CSS（SASS）代码执行此操作：

.container
  background-color: red
  .inner
    ...
    border-bottom-color: red

（在这种情况下，.inner是一个三角形，所以它的边框颜色作为背景颜色）

我想避免指定第二个“红色”，例如：

.container
  background-color: red
  .inner
    border-bottom-color: attr(parent.background-color)

有没有办法在纯CSS中执行此操作？（我可以使用SASS变量，JS或其他东西来做，但我想留在CSS中。）

Answer 1

在纯CSS中没有办法（目前）这样做，但既然你提到你正在使用SASS，你可以简单地使用一个变量：

$myColor: red

.container
    background-color: $myColor
    .inner
        border-bottom-color: $myColor

修改

根据CSS其余部分的结构，以及您处理border-color后，您可以在border-color上设置color或.container，然后设置{ {1}}上的{1}}：

border-bottom-color: inherit;

但是，这仅适用于示例中的属性。没有办法在不同的属性中显式继承值。

Answer 2

CSS variables非常early stage of the specification process。

这肯定会来，但你现在不能真正使用它。（MDN声明Fx 29已经支持它了）

示例：

::root {
    var-brand-color: red;
}

.container {
    background-color: var( brand-color );
}
.container .inner {
    border-bottom-color: var( brand-color );
}

在css中，我可以从元素的父级访问属性的值吗？

2 个答案: