Can CSS Native Variables Be Used in Media Queries?

Using CSS native variables in media queries

CSS native variables are a powerful tool for controlling styles based on the values of variables defined in the CSS. However, there is a limitation to using these variables in media queries.

The issue arises when attempting to use CSS variables within media queries. For instance, consider the following code:

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

This code aims to define a media query that applies styles when the viewport width is less than or equal to the value stored in the --mobile-breakpoint variable. However, this approach does not work because CSS variables cannot be used in media queries.

The CSS specification explicitly states that the var() function, used to access CSS variables, can only be employed in property values. It cannot be used in property names, selectors, or media queries. This limitation is imposed to ensure that CSS variables are used for their intended purpose of controlling style values, rather than modifying the structure or functionality of the CSS document.

To address this issue, one can employ a CSS preprocessor like Sass or Less. These preprocessors enable the use of variables in media queries by translating the code into valid CSS. Using a preprocessor, the previous code could be rewritten as:

$mobile-breakpoint: 642px;

@media (max-width: $mobile-breakpoint) {

}

By using a preprocessor, the $mobile-breakpoint variable can be used within the media query, allowing for the desired style behavior based on the defined variable.

The above is the detailed content of Can CSS Native Variables Be Used in Media Queries?. For more information, please follow other related articles on the PHP Chinese website!