是否可以将父项的属性用作变量?例如，在此代码中，我希望能够为 'inner-box' 元素赋予与其父元素 'box' 相同的颜色.
让它像 .inner-box {background-color: $Outer-Parent's-Color;}
<div class="box1"><div class = "inner-box">盒子<div class="box red"><div class="box1"><div class = "inner-box">红盒子
和CSS
.box {宽度:100px；填充:10px；边距:10px；背景颜色:蓝色；}.box1 {背景颜色:深蓝色；填充:10px；}.box.red {背景颜色:红色；}.box.red .box1 {背景颜色:深红色；}.内盒 {背景色:$Outer-Parent's-Color;}@Thomas Wood 和 @Oliver Benns:不继承父级的工作吗?在我看来，我们与祖父母和孩子打交道.所以没什么特别的，只是简单的 css 添加一个选择器:
.box {宽度:100px；填充:10px；边距:10px；}.box, .box div div/* 选择祖父和子代，不是花哨的 sass 嵌套选择器 */背景颜色:蓝色；}或者用 sass @mixin 和 @for 计算颜色值:
@mixin 祖父母($h, $width: 200px) {宽度:$width;背景色:hsl(20 * $h, 100%, 50%);}@mixin 孩子($h){背景色:hsl(20 * $h, 100%, 50%);}@for $i 从 1 到 6 {.box-#{$i} { @include 祖父母($i, 20 * $i);}.box-#{$i} div div { @include child($i);}}Is it possible to use a property of a parent as variables? For example in this code, i'd like to be able to give the 'inner-box' element same color as its parent 'box'.
Make it something like .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>
and the 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;
}
@Thomas Wood and @Oliver Benns: Doesn't inherit work with the parent? It seems to me that we deal with a grandparent and a child. So nothing fancy just simple css add a selector:
.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;
}
Or fancy with sass @mixin and @for and calculating the color values:
@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 的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
