Same issue as #33 : the generated scss file does not seem to match the rules defined

[rrajkomar]

Hello,

I'm having the same issue as #33. Unless I'm mistaken (which is possible), the following code :

@mixin <%= cssClass%>($filename, $insert: before, $extend: true) {
    &:#{$insert} {
        @if $extend {
            @extend %<%= cssClass%>;
        } @else {
            @include <%= cssClass%>-styles;
        }
        content: <%= cssClass%>-char($filename);
    }
}

should not result in the following (extracted from your test files) :

.custom-icon:before {
    font-family: "Icons";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
}

.custom-icon-github:before {
    content: "\E002";
}

.custom-icon-twitter:before {
    content: "\E003";
}

but rather :

.custom-icon-github:before, .custom-icon-twitter:before {
    font-family: "Icons";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
}

.custom-icon-github:before {
    content: "\E002";
}

.custom-icon-twitter:before {
    content: "\E003";
}

Let me explain my thinking :

The "&:#{$insert}" part replaces & with whatever selector is used right before, based on your test files this is an example :

.custom-icon-github {
    @include custom-icon(github);
}

so & should be replaced with .custom-icon-github and #{$insert} by before (as it is the defautl value)

Then the @extend %<%= cssClass%>; part should be called as $extend is true by default
which should result in the following logic :

.custom-icon-github should extend %cssClass (which in this case resolve to %custom-icon
therefore we shoudl not end-up with a .custom-icon:before selector but a .custom-icon-github:before selector since %custom-icon is (again if I understood how extends works right) resolved to .custom-icon-github:before (see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders)

[backflip]

@rrajkomar, we assume you are using .custom-icon.custom-icon-github in combination (somewhat BEM-like).