CSS Variables in Media Queries

Many novice developers find it difficult to read nested properties used in preprocessors using the "&" symbol. Instead of formulas and mixins, they prefer to write regular rules. And instead of SASS variables, they use CSS custom properties. In this case, the only reason to continue using SASS is the ability to add variable breakpoints into media queries to change the layout. For example, $tablet: 768px or $dektop: 1100px.

This is why I’m very glad to learn about the existence of the PostCSS plugin PostCSS Custom Media. This allows you to use the syntax of custom media queries from the draft Media Queries Level 5 specification and convert them to a numeric data type syntax that is supported by browsers.

In addition to the basic description on the main page of the plugin, a separate document contains examples of its use with the help of gulp, webpack, etc., as well as in Node.js.

Excerpt From Specification

When creating documents that use media queries, the same expressions may be repeated in different places, for example, to specify multiple @import statements. Repeating media queries may be risky. If a breakpoint needs to be changed, the developer will have to change the values in all cases. If the change is required in some particular case, it will be quite difficult to catch the errors that have arisen.

To avoid this, the specification describes methods for defining custom media queries, which are simply-named aliases for longer and more complex regular media queries. Thus, a media query used in several places can be replaced with one custom query that will be reused as many times as needed. And if you need to change its value, you will have to do this only once.

Example

To see how the plugin works, let’s consider a simple example of its use. I will be using gulp.

Announcement

As shown on the plugin page, the first step is to declare a custom media query. This will be the screen size to which the alternate CSS rule will apply.

@custom-media --desktop (min-width: 900px);

1. A custom media query declaration starts with the @custom-media statement. It is an alternative to the var keyword in JavaScript and creates a variable.
2. The second place is occupied by the custom media query name --desktop, which, like CSS variables, starts with two hyphens.
3. And then comes the condition, which in this case is the screen-width breakpoint.

Use in Styles

After creating a variable, you can use it in the media query instead of the condition.

body {
  background-color: gray;
}

@media (--desktop) {
  body {
    min-block-size: 100vh;   
    background-color: red;
  }
}

Gulp Configuration

My gulpfile.js configuration code given in the documentation did not work, so I changed it a little.

const gulp = require("gulp")
const postcss = require("gulp-postcss");
const postcssCustomMedia = require("postcss-custom-media");
const rename = require("gulp-rename");

gulp.task("css", function() {
  return gulp.src("./src/style.css")
    .pipe(postcss([
      postcssCustomMedia()
    ]))
    .pipe(rename("style.css"))
    .pipe(gulp.dest("."))
});

Result

After processing, we get the following regular styles:

body {
  background-color: gray;
}

@media (min-width: 900px) {
  body {
    min-block-size: 100vh;   
    background-color: red;
  }
}

Conclusion

I’m very glad that we’ve overcome the last barrier to pure CSS. I wish you all a pleasant web development!