function - Sass extend with pseudo selectors -
i using compass manage sass files on mac osx. have these files:
sass/ screen.scss partials folder/ ... _fonts.scss _functions.scss ...
in fonts have rule reuse @extend.
//fonts.scss .icon-ab-logo, { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-ab-logo:before { //i want reuse this. content: "\e000"; }
in functions have screen.scss:
.logo { position: absolute; top: 0; bottom: 0px; z-index: 500; width: 9.5em; background: $logo; @include transition(all 0.2s); &:after{ @include icon( ".icon-ab-logo" ); } }
finally in functions.scss call this:
@mixin icon( $icon ){ font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; @extend #{$icon}:before; //<- problem, no errors isn't parsed. }
is there way reference .icon-ab-logo:before using mixin? workarounds? reading.
when want extend pseudo class or pseudo element, want extend parent selector (ie. comes before colon).
%foo:before { color: red; } .bar { @extend %foo; }
generates:
.bar:before { color: red; }
so instance, want this:
.icon-ab-logo, { font: 100%/1 'icomoon'; // use shorthand speak: none; text-transform: none; -webkit-font-smoothing: antialiased; } %foo:before, .icon-ab-logo:before { //i want reuse this. content: "\e000"; } @mixin icon( $icon ){ font: 100%/1 'icomoon'; // use shorthand speak: none; text-transform: none; -webkit-font-smoothing: antialiased; @extend #{$icon}; } .bar { @include icon('%foo'); }
be aware mixin generates lot of styles, it's not suitable extensive reuse. make lot more sense extending well.
Comments
Post a Comment