css - 使用 parent 的属性(property)作为SASS的变量

Question

是否可以使用父级的属性作为变量？例如，在此代码中，我希望能够为“inner-box”元素赋予与其父“box”相同的颜色。

让它像.inner-box {background-color: $Outer-Parent's-Color;}

Example on Fiddle

<div class="box">
    <div class="box1">
        <div class = "inner-box">
            BOX
        </div>
    </div>
</div>

<div class="box red">
    <div class="box1">
        <div class = "inner-box">
            RED BOX
        </div>
    </div>
</div>

和CSS

.box {
    width: 100px;
    padding: 10px;
    margin: 10px;
    background-color: blue;
}
.box1 {
    background-color: darkblue;
    padding: 10px;
}
.box.red {
    background-color: red;
}
.box.red .box1 {
    background-color: darkred;
}
.inner-box {
    background-color: $Outer-Parent's-Color;
}

Answer 1

如果您使用的是 SASS，则可以将内框嵌入框内

.box {    
    width: 100px;
    padding: 10px;
    margin: 10px;
    background-color: blue;

    &.inner-box {
        background-color: inherit;
    }
}