css - Sass referencing parent selectors using the ampersand character within nested selectors -



css - Sass referencing parent selectors using the ampersand character within nested selectors -

just when thought sass coolest thing since sliced bread, had go , allow me down. i'm trying utilize ampersand select parent of nested item. it's complex selection , returning unexpected results...

my sass:

.page--about-us { { text-decoration:none; } .fa-stack { .fa { color:pink; } & { &:hover { .fa-circle-thin { color:red; } .fa-twitter { color:blue; } } } } }

outputted css:

.page--about-us { text-decoration: none; } .page--about-us .fa-stack .fa { color: pink; } .page--about-us .fa-stack:hover .fa-circle-thin { color: red; } .page--about-us .fa-stack:hover .fa-twitter { color: blue; }

expected output (note placement of tag):

.page--about-us { text-decoration: none; } .page--about-us .fa-stack .fa { color: pink; } .page--about-us .fa-stack:hover .fa-circle-thin { color: red; } .page--about-us .fa-stack:hover .fa-twitter { color: blue; }

demo: http://sassmeister.com/gist/8ed68bbe811bc9526f15

this normal behavior, described in sass documentation (link):

& replaced parent selector as appears in css. means if have nested rule, parent selector resolved before & replaced.

meaning:

.foo { .bar { .baz & { color: red; } } }

will render as:

.baz .foo .bar { color: red; }

and not:

.baz .bar { color: red; }

the right way expected result one:

.page--about-us { { text-decoration:none; .fa-stack:hover { .fa-circle-thin { color:red; } .fa-twitter { color:blue; } } } .fa-stack { .fa { color:pink; } } }

css css3 sass

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -