phpsass
phpsass copied to clipboard
@extend not compiling correctly in nested selectors
@extending a class with nested properties like .clearfix
below results in the nested properties being applied to the selector itself—for example, .clearfix:after
styles are applied to ul li
instead of ul li:after
.
.clearfix {
zoom:1;
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
div { @extend .clearfix; } // works fine
ul li { @extend .clearfix; } // does not
compiles to:
.clearfix,
div,
ul li {
zoom: 1; }
.clearfix:before,
.clearfix:after,
div:before,
ul li,
div:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden; }
.clearfix:after,
div:after,
ul li {
clear: both; }
I have also an issue with @extend
:
.a {
color: red;
.c {
background: yellow;
}
}
.b {
@extend .a;
}
compiles to
.a, .b {
color: red;
}
.a .c, .a .b { // should be .a .c, .b .c
background: yellow;
}