Make it possible to use it at Media Query [SASS output, %extend svg-common -> @mixin svg-common]

[PeterMK85]

Due to the current limitation of SASS (You can't extend % or . classes in a media query, but you can with a mixin), is there a way to transform the genrated %svg-common into a @mixin ?

The "classes" I was able to alter it down to placeholder (or silent classes) or mixins but because the first property of them is:
@extend %svg-common;

It actually fails during the compile.

[jkphl]

Hi @PeterMK85,

thanks for requesting this feature. In fact, I was reading about this myself a couple of days ago, and I'd also be interested in extending the classes from within media queries. Unfortunately, my time is extremely limited these days ... Would you be able to provide a complete example of how the Sass output (including the mixin) would have to look like? That'd speed it up a lot ...

Thanks & cheers,
Joschi

[PeterMK85]

uu thanks for the fast reply @jkphl

Its a simple modification

Currently using this:

%svg-common {
    background: url(../images/ingatlanok-sprite-31b23ecd.svg) no-repeat;
}

.svg-breadcrumb--arrow {
    @extend %svg-common;
    background-position: 93.73458312777504% 91.19018404907976%;
}

This need to be modified to this:

@mixin svg-common {
    background: url(../images/ingatlanok-sprite-31b23ecd.svg) no-repeat;
}

.svg-breadcrumb--arrow {
    @include svg-common;
    background-position: 93.73458312777504% 91.19018404907976%;
}

Facts:

By this modification you will loose the aggregated background declaration (%extend working that way, make only one background declaration, where all the classes were in one place) _but_ by this modification its become possible to use it in media querys.

(by a simple prefix modification to generate mixins instead of classes and by this modification the mixins can used in media query (called Sass directive))

Thanks for your effort :)

[jkphl]

Ah ok, looks easy. So wouldn't it be sufficient to provide a boolean "mixin" option that toggles between the @mixin and the @extend style?

[PeterMK85]

Yep that would be great to choose by a parameter 👍

[jkphl]

Continued here.

[falcik]

I'm currently working with a project and I have generated my icons in SCSS with classes instead of mixins. Now I figured out that some of the icons need to be changed within the media queries. Author has provided an option that toggles between @mixin and @extend styles. I wonder if it is possible to have them both? For example all icons use @extend style, but icons with name (as example "my-icon~mixin.svg") would have mixin generated instead of classname?