sass - scss basics: inheritance with nesting -
i have structure:
<div class="container"> <p>some content</p> <div class="subcontainer"> <p>some content</p> <div class="anothersub"> <p>some content <a href="#">a link</a>.</p> </div> </div> </div>
say want apply color children contained in div elements.
i thought nesting feature of scss means can text in white writing this:
.container { color: white; .subcontainer { // other rules margin: 10px; } .anothersub { text-decoration: none; } }
but instead looks have copy color: white; each , every div, p , element. or miss (sass newbie here)?
this has nothing scss really, basic css.
setting text colour on .container element is need set text colour child elements, scss or not, styles cascade (css).
i suspect seeing links not white because have additional styles (including colour) specified browsers stylesheet (and possibly in css). need specify link colour.
you can scss using:
.container { &, { color: #fff; } }
which compiled to:
.container { color: #fff;} .container {color: #fff;}
Comments
Post a Comment