Class as mixin

[OliverJAsh]

I want to re-use a class’ styles for another class inside a media query.

The only way to do this today, AFAIK, is to create a mixin with the common styles:

@mixin foo {
    // styles
}

.foo {
    @include foo();
}

@media () {
    .bar {
        @include foo();
    }
}

Is there a better way? I understand @extend can not provide for my needs here, although I'm not sure what the status of that is now nor that it will be like in the future. If not, could we provide sugar syntax for this, given how often it is needed? Perhaps:

.foo {
    // styles
}

@media () {
    .bar {
        @include .foo;
    }
}

I did a cursory search to see if this had been discussed. Sorry if I missed something.

[whaaaley]

Yes, the only way to "extend" inside media is with mixins. The reason that is currently being argued against adding this is that it would required duplicating the same chunk of code to the media which would cause "bloat" in your css and that it doesn't compress the selectors, which is the key feature of extend that mixins don't have. It's being discussed here #1050.

[OliverJAsh]

The solution described by @chriseppstein in #1050 (comment) solves my problem.