phpsass icon indicating copy to clipboard operation
phpsass copied to clipboard

@extend not compiling correctly in nested selectors

Open ericpedia opened this issue 12 years ago • 1 comments

@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; }

ericpedia avatar Sep 25 '12 13:09 ericpedia

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;
    }

istepanov avatar Sep 26 '12 13:09 istepanov