Friday, 27 September 2013

Use parents' property as variable with SASS

Use parents' property as variable with SASS

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

No comments:

Post a Comment