I want to assign value conditionally if parent element has a specific class. Exp:
HTML
<div class="parent">
<div class="child">Some Text</div>
</div>
CSS
.child {
font-size: 16px;
}
but if parent element has a class named "big"
HTML
<div class="parent big">
<div class="child">Some Text</div>
</div>
I want to change value as follows
CSS
.child {
font-size: 20px;
}
For example as follows:
.child {
font-size: parent.hasClass('big') ? 20px : 16px;
}
How can I do that in SASS?
sass Nesting The parent selector (&)Create a new selector that requires both the parent selector and another on the same element by placing the new selector directly after a parent selector. Have the parent appear after a nested selector in the compiled CSS by placing the parent selector after the nested selector.
The parent selector, & , is a special selector invented by Sass that's used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
Simply create two rules:
.child {font-size: 16px;}
.big .child {font-size: 20px;}
In SASS it would be
.child
font-size: 16px
.big &
font-size: 20px
It's impossible using pure CSS (the whole idea is cascading). But there might be a way using SASS. Check this out:
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
EDIT: Another option would be using JavaScript, like Jpegzilla suggested.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With