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

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

javascript - Highcharts multi-color line -

javascript - Enter key does not work in search box -