CSS variables in media queries

Many novice developers find it difficult to read the home features used in preprocessors using the “and” symbol. Instead of formulas and mixes, they like to write regular rules. And instead of SASS variables, they use custom CSS features. In this case, the only reason SASS continues to be used is the ability to add variable breakpoints to media queries to change the layout. For example, $tablet: 768px Or $dektop: 1100px.

That is why I am very happy to know about the existence of Post CSS Plugin Post CSS Custom Media. It allows you to use the syntax of custom media queries from the Level 5 specification of the draft media queries and converts them into a numeric data type syntax with the help of browsers.

In addition to the basic description on the main page of the plugin, a separate document is available in Node.js, along with examples of how to use it with the help of Gulp, Web Pack, etc.

Excerpt from the description.

When creating documents using media queries, the same feedback can be repeated in different places, for example, multiple @import Statements Repeating media questions can be dangerous. If the breakpoint needs to be changed, the developer will have to change the values ​​in each case. If a change is needed in a particular case, it will be very difficult to catch the mistakes that arise.

To avoid this, the description outlines ways to define custom media queries, which are mere nicknames for longer and more complex regular media queries. That way, the media query used in multiple locations can be replaced with a custom query that will be used as many times as needed. And if you need to change the price, you only have to do it once.

Example

To see how the plugin works, let’s consider a simple example of how to use it. I will use Gulp.

Announcement

As shown on the Plugins page, the first step is to announce the custom media query. This will be the screen size to which the alternative CSS principle applies.

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

  1. Announcing a custom media query @custom-media Statement This is an alternative. var Creates a keyword and a variable in JavaScript.
  2. Elsewhere, custom media is in the name of inquiry. --desktop, Which, like the CSS variable, starts with two hyphens.
  3. And then there’s the bet, which in this case is the breakpoint of screen width.

Use in style.

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

body {
  background-color: gray;
}

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

Gulp configuration

Mine gulpfile.js The configuration code in the documentation didn’t work, so I changed it a bit.

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;
  }
}

Result

I’m glad we overcame the last hurdle of pure CSS. I wish you all a pleasant web development!

.

Write a Comment

Your email address will not be published. Required fields are marked *