Question

是否可以使用父项的属性作为变量？例如，在这段代码中，我希望能够为'inner-box'元素提供与其父'box'相同的颜色。

使它像 .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

如果您正在使用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 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); }
}

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

3 个答案: