用父母的财产与上海社会科学院变量(Use parents' property as vari

是否有可能使用父为变量的属性？ 例如，在此代码，我想能够得到“内盒”元件相同的颜色作为其父“盒子”。

让它像.inner盒{背景色：$外Parent's色;}

例如在提琴

<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;
    }
}

Answer 2:

使用时只需将继承价值：

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

Answer 3:

@Thomas木材和@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;
}

或花哨青菜@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); }
}

文章来源: Use parents' property as variable with SASS