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
Post a Comment