As Oriol has answered, CSS Variables Level 1’s var() cannot currently be used in media queries. However, there have been recent developments that will address this problem. Once CSS Environment Variables Module Level 1 is standardized and implemented, we’ll be able to use env() variables in media queries in all modern browsers.

The CSS Working Group (CSSWG) codified env() in a new standard (currently at a draft stage): the CSS Environment Variables Module Level 1 (see this GitHub comment and this comment for more info). The draft calls out variables in media queries as an explicit use case:

Because environment variables don’t depend on the value of anything drawn from a particular element, they can be used in places where there is no obvious element to draw from, such as in @media rules, where the var() function would not be valid.

If you read the specification and have a concern, or if you want to voice your support for the media-query use case, you can do so in issue #2627, in issue #3578, or in any CSS GitHub issue labeled with “css-env-1”.

GitHub issue #2627 and GitHub issue #3578 are devoted to custom environmental variables in media queries.

Original answer from 2017-11-09: Recently, the CSS Working Group decided that CSS Variables Level 2 will support user-defined environment variables using env(), and they will try to make them be valid in media queries. The Group resolved this after Apple first proposed standard user-agent properties, shortly before the official announcement of iPhone X in September 2017 (see also WebKit: “Designing Websites for iPhone X” by Timothy Horton). Other browser representatives then agreed they would be generally useful across many devices, such as television displays and ink printing with bleed edges. (env() used to be called constant(), but that has now been deprecated. You might still see articles that refer to the old name, such as this article by Peter-Paul Koch.) After some weeks passed, Cameron McCormack of Mozilla realized that these environment variables would be usable in media queries, and Tab Atkins, Jr. of Google then realized that user-defined environment variables would be especially useful as global, non-overridable root variables usable in media queries. Now, Dean “Dino” Jackson of Apple will join Atkins in editing Level 2.

You can subscribe to updates on this matter in w3c/csswg-drafts GitHub issue #1693 (for especially relevant historical details, expand the meeting logs embedded in the CSSWG Meeting Bot’s resolutions and search for “MQ”, which stands for “media queries”).

What you can do however is @media query your :root statement!

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}

Totally works in Chrome, Firefox and Edge at least the latest production versions as of this posting.

One limitation: if you need to access the value as a variable – for example to use in calculations elsewhere – you will need to have a variable, and it requires defining the variable in two places: the media query and variable declaration.

Apparently it's just not possible to use native CSS variables like that. It's one of the limitations.

A clever way to use it is to change your variables in the media-query, to impact all your style. I recommend this article.

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

The level 5 specification of media queries define Custom Media Queries that does almost what you are looking for. It allows you to define breakpoint similar to how you do with CSS variables and later use them in different places.

Example from the specification:

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}
@media (--narrow-window) and (script) {
  /* special styles for when script is allowed */
}

There is still no support for this actually so we have to wait before using this feature.

One way to achieve what you want is using npm package postcss-media-variables.

If you are fine with using npm packages then you can take a look documentation for same here:

• postcss-media-variables

Example

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}

Short Answer

You can use JavaScript to change the value of media queries and set it to the value of a css variable.

// get value of css variable
getComputedStyle(document.documentElement).getPropertyValue('--mobile-breakpoint'); // '642px'

// search for media rule
var mediaRule = document.styleSheets[i].cssRules[j];

// update media rule
mediaRule.media.mediaText = '..'

Long Answer

I wrote a small script which you can include on your page. It replaces every media rule with a value of 1px with the value of the css variable --replace-media-1px, rules with value 2px with --replace-media-2px and so on. This works for the media queries with, min-width, max-width, height, min-height and max-height even when they are connected using and.

JavaScript:

function* visitCssRule(cssRule) {
    // visit imported stylesheet
    if (cssRule.type == cssRule.IMPORT_RULE)
        yield* visitStyleSheet(cssRule.styleSheet);

    // yield media rule
    if (cssRule.type == cssRule.MEDIA_RULE)
        yield cssRule;
}

function* visitStyleSheet(styleSheet) {
    try {
        // visit every rule in the stylesheet
        var cssRules = styleSheet.cssRules;
        for (var i = 0, cssRule; cssRule = cssRules[i]; i++)
            yield* visitCssRule(cssRule);
    } catch (ignored) {}
}

function* findAllMediaRules() {
    // visit all stylesheets
    var styleSheets = document.styleSheets;
    for (var i = 0, styleSheet; styleSheet = styleSheets[i]; i++)
        yield* visitStyleSheet(styleSheet);
}

// collect all media rules
const mediaRules = Array.from(findAllMediaRules());

// read replacement values
var style = getComputedStyle(document.documentElement);
var replacements = [];
for (var k = 1, value; value = style.getPropertyValue('--replace-media-' + k + 'px'); k++)
    replacements.push(value);

// update media rules
for (var i = 0, mediaRule; mediaRule = mediaRules[i]; i++) {
    for (var k = 0; k < replacements.length; k++) {
        var regex = RegExp('\\((width|min-width|max-width|height|min-height|max-height): ' + (k+1) + 'px\\)', 'g');
        var replacement = '($1: ' + replacements[k] + ')';
        mediaRule.media.mediaText = mediaRule.media.mediaText.replace(regex, replacement);
    }
}

CSS:

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

  --replace-media-1px: var(--mobile-breakpoint);
  --replace-media-2px: ...;
}

@media (max-width: 1px) { /* replaced by 642px */
  ...
}

@media (max-width: 2px) {
  ...
}

This is not exactly an answer to using variables in media queries, but it tackles the problem of having to specify the width multiple times in components

My solution uses container queries in combination with media queries and exploits the possibility to have named containers.

First we need to define the breakpoints

@media (min-width: 399px) {
  body {
    container-type: inline-size;
    container-name: xsmall;
  }
}

@media (min-width: 1079px) {
  body {
    container-type: inline-size;
    container-name: xsmall small;
  }
}

@media (min-width: 1439px) {
  body {
    container-type: inline-size;
    container-name: xsmall small medium;
  }
}

@media (min-width: 1999px) {
  body {
    container-type: inline-size;
    container-name: xsmall small medium desktop;
  }
}

Here we use the possibility to define multiple container names on elements. Using the mobile first approach and adding styles as we go up in screen size.

Now if we want to make some changes to a element in the small screen size and up I can add this style definition

@container small (min-width: 0) {
  ... some css
}

IMO the only thing that makes this look hacky is that the container query need to have a predicate, so the (min-width:0) is needed to make it work.

With this approach we can specify screen breakpoints in a single place and and remove all absolute screen sizes queries from components.

--- Edited:

Unfortunately this has some major drawbacks that makes this less useful than it could be

You can build a media query programmatically using matchMedia:

const mobile_breakpoint = "642px";
const media_query = window.matchMedia(`(max-width: ${mobile_breakpoint})`);
function toggle_mobile (e) {
  if (e.matches) {
    document.body.classList.add("mobile");
  } else {
    document.body.classList.remove("mobile");
  }
}
// call the function immediately to set the initial value:
toggle_mobile(media_query);
// watch for changes to update the value:
media_query.addEventListener("change", toggle_mobile);

Then, instead of using a media query in your CSS file, apply the desired rules when body has the mobile class:

.my-div {
  /* large screen rules */
}

.mobile .my-div {
  /* mobile screen rules */
}

As you can read other answers, still not possible to do so.

Someone mentioned custom environmental variables (similar to custom css variables env() instead of var()), and the principle is sound, though there are still 2 major issues:

• weak browser support
• so far there is no way to define them (but probably will be in the future, as this is so far only an unofficial draft)

With modern CSS, you can simulate media queries using if() and calculation. You will then be able to adjust the breakpoint easily (more detail on my blog: https://css-tip.com/dynamic-queries/)

Here is a basic example:

:root {
  --breakpoint: 500px;
}

@property --g {syntax: "<number>";inherits: true;initial-value: 0;}
.container {
  --g: max(0,sign(100vw - var(--breakpoint)));
  /* lightblue if screen_width > breakpoint 
     darkred   if screen_width < breakpoint 
  */
  background: if(style(--g: 1): lightblue; else: darkred);
  
  min-height: 200px;
}

<div class="container"></div>

With Bootstrap 5, I've solved this with the media-breakpoint-down() function.

First of all, you'll need to import the functions, variables, and mixins files:

@import "~/bootstrap/scss/functions";
@import "~/bootstrap/scss/variables";
@import "~/bootstrap/scss/mixins";

And then, include your specific media style:

@include media-breakpoint-down(lg) {
.btn {
  padding: 20px;
  margin-right: 15px;
}}
@include media-breakpoint-down(md) {
.btn {
  padding: 10px;
  margin-right: 5px;
}}
@include media-breakpoint-down(sm) {
.btn {
  display: none;
}}

Where Breakpoints are defined as a map of (name: minimum width), order from small to large: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)

You can also use the media-breakpoint-up(), media-breakpoint-only(), media-breakpoint-between().

See the official doc: https://getbootstrap.com/docs/5.0/layout/breakpoints/#media-queries

I am trying to step away from all preprocessing in all of our projects. I like just having to adjust a .css file and seeing the results immediatly and not having to mess with yarn, gulp, npm, webpack, watchers, version issues etc. Plain vanilla css already supports two of the three things I used sass/scss the most for: variables and nesting selectors. So I'm also looking for a solution for the third thing: using variables in media queries / setting breakpoints (small, medium,..) in one place.

For better ad blocking, I use Firefox, so unfortunatly using CSS Container Style Queries like this example is currently not an option for me. And css '@custom-media' stuff is not implemented yet at this moment.

So in the mean time, I use a plain javascript solution to add classes to the body, like 'md', 'up-lg' 'down-md' etc, with naming and breakpoint values a bit similar to bootstrap. Then I can use these body classes in css instead of media queries:

body.up-lg {
  .mobile-toggle: display: none;
}

Works for me. This is the javascript I use which adds the necessary body classes:

// Define out breakpoints.
const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1400,
  xxl: 1600
};

// Function to add the correct classes to the body element.
function applyBreakpointClasses() {
  const width = window.innerWidth;
  const body = document.body;

  // Remove existing breakpoint classes.
  body.className = body.className
    .split(' ')
    .filter(cls => !Object.keys(breakpoints).some(bp => cls === 'up-' + bp || cls === 'down-' + bp || cls === bp))
    .join(' ');

  // Loop breakpoints.
  for (const [key, value] of Object.entries(breakpoints)) {
    // Add up-[breakpoint] class.
    if (width >= value) {
      body.classList.add(`up-${key}`);
    }
    // Add down-[breakpoint] class.
    if (width < value) {
      body.classList.add(`down-${key}`);
    }
  }

  // Add the curreznt breakpoint class.
  let current = 'xs';
  for (const [key, value] of Object.entries(breakpoints)) {
    if (width >= value) {
      current = key;
    }
  }
  body.classList.add(`${current}`);
}

// Add event listeners to set the classes.
window.addEventListener('resize', applyBreakpointClasses);
window.addEventListener('DOMContentLoaded', applyBreakpointClasses);

How to use Variables for Media Query Break Points

So guys i tried something like this below but it wasn't working, so i found out that css variables does not work on break points so what i did was to use SCSS

  @media only screen and (max-width: var(--bp-tablet)) {
    display: none;
  }

SCSS CODE

1. Create your variable for scss

$bp-tablet: 56.25em; // 900px

2. call the variable in the breakpoints and that's it!

media only screen and (max-width: $bp-tablet) {
    display: none;
  }