Sharing CSS code between a selector and a media query — 17 Jul 2020

While cleaning up the CSS of this site (aka procrastinating), I realised that it wasn’t possible to use @extend in a media query.

You may not @extend an outer selector from within @media

I need to reuse a block of code inside and outside a media query: my dark theme can be turned on either by setting an attribute in the html element (on demand), or by honoring the user’s preferences via a media query.

I naively throught I could @extend a set of custom properties and styles both in the html selector and the media query, but it turns out that media queries don’t support @extend. Trying to extend a placeholder inside a media query from another scope (in this case, the root) won’t work.

:root {
  // custom properties for light theme
}
%dark-theme-cvars {
  // redefined custom properties for dark theme
}
[data-theme="dark"] {
    @extend %dark-theme-cvars;
}
@media (prefers-color-scheme: dark) {
    :root {
        @extend %dark-theme-cvars;
    }
}

:root {
  // custom properties for light theme
}
@mixin dark-theme-cvars {
  // redefined custom properties for dark theme
}
[data-theme="dark"] {
    @include dark-theme-cvars;
}
@media (prefers-color-scheme: dark) {
    :root {
        @include dark-theme-cvars;
    }
}