css - 使用父母的财产作为 SASS 的变量

Question

是否可以将父级的属性用作变量？例如，在这段代码中，我希望能够赋予“内盒”元素与其父“盒子”相同的颜色。

使其类似于.inner-box {background-color: $Outer-Parent's-Color;}

小提琴的例子

<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

@Thomas Wood 和@Oliver Benns：继承不与父母一起工作吗？在我看来，我们与祖父母和孩子打交道。所以没有什么特别的，只是简单的 css 添加一个选择器：

.box {
    width: 100px;
    padding: 10px;
    margin: 10px;
}
.box, .box div div /* Selects the grandparent and child and is not a fancy sass nested selector */
    background-color: blue;
}

或者使用 sass @mixin 和 @for 并计算颜色值：

@mixin grandparent($h, $width: 200px) {
  width: $width;
  background-color: hsl(20 * $h, 100%, 50%);
}

@mixin child($h) {
  background-color: hsl(20 * $h, 100%, 50%);
}

@for $i from 1 through 6 {
  .box-#{$i} { @include grandparent($i, 20 * $i); }
  .box-#{$i} div div { @include child($i); }
}

Answer 2

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

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

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

Answer 3

只需使用继承值：

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