@extend doesn't work in media queries

[elizabethyalkut]

This is a SASS thing (discussion of possible solution: sass/sass#1050 but it doesn't look likely to get implemented anytime soon if ever) , not a tyfy thing, but since @extend doesn't work within media queries, I'd like to propose that things such as .list-flex etc. should be built out of mixins. This would allow us to do something like:

ul.menu {
    @media (min-width: $mediumish-shy) {
      @include list-flex;
      @include list-flex-center;
    }
    @extend .list-nobullet;
    @extend .reverse;
}

so the layout of a list could change depending on available screen size. Currently, we have to actually duplicate the code in, e.g., .list-flex in responsive contexts.

There's support for this point of view:

• https://tech.bellycard.com/blog/sass-mixins-vs-extends-the-data/ (discusses performance of gzipped, compiled css)
• https://www.sitepoint.com/avoid-sass-extend/