Using Sass Variables with CSS3 Media Queries

sass media queries mixin
scss media query
media query variables
scss variables
sass media queries bootstrap
scss media query not working
sass combine media queries
sass get screen width

I'm trying to combine the use of a Sass variable with @media queries as follows:

$base_width:1160px;

@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}

$base_width is then defined at various points in the stylesheet width percentage-based measurements to produce fluid layouts.

When I do this, the variable seems to be recognized properly but the conditions for the media query are not. For example, the above code produces an 1160px layout regardless of screen width. If I flip-flop the @media statements like so:

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}

It produces a 960px layout, again regardless of screen width. Also note that if I remove the first line of $base_width: 1160px; it returns an error for an undefined variable. Any ideas what I'm missing?


This is simply not possible. Since the trigger @media screen and (max-width: 1170px) happens on the client-side.

Achieving your expected result would only be possible if SASS grabbed all rules and properties in your stylesheet containing your $base_width variable and copied/changed them accordingly.

Since it won't work automatically you could do it by hand like this:

@media screen and (max-width: 1170px)
      $base_width: 960px // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $base_width e.g.
      #wrapper
          width: $base_width
          ...

@media screen and (min-width: 1171px)
    $base_width: 1160px
      #wrapper
          width: $base_width
          ...

This is not really DRY but the best you can do.

If the changes are the same every time you could also prepare a mixin containing all the changing values, so you wouldn't need to repeat it. Additionally you can try to combine the mixin with specific changes. Like:

@media screen and (min-width: 1171px)
    +base_width_changes(1160px)
    #width-1171-specific-element // additional specific changes, that aren't in the mixin
        display: block

And the Mixin would look like this

=base_width_changes($base_width)
    #wrapper
        width: $base_width

How to use Sass Variables with CSS3 Media Queries, Using SASS Variables with CSS3 Media queries is not much easily implemented. It is possible only if SASS grabs all the properties of queries into the style-sheet containing the SASS variable and then changes them accordingly. It can be done in two ways: Using the Post-CSS variables. This isn't possible with SASS, but it is possible with CSS variables (or CSS custom properties).The only drawback is browser support – but there's actually a PostCSS plugin - postcss-css-variables - that "flattens" the use of CSS variables (which gives you support for older browsers, too).


Similar to Philipp Zedler's answer, you can do it with a mixin. That lets you have everything in a single file if you want.

    @mixin styling($base-width) {
        // your SCSS here, e.g.
        #Contents {
            width: $base-width;
        }
    }

    @media screen and (max-width: 1170px) {
        @include styling($base-width: 960px);
    }
    @media screen and (min-width: 1171px) {
        @include styling($base-width: 1160px);
    }

Approaches to Media Queries in Sass, A first step would be to store that breakpoint in a variable and use it to construct the media query. /* Using plain CSS */ @media (min-width: 768px)  Using media queries in CSS as part of responsive websites is bread and butter stuff to todays front-end developer. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well.


Edit: Please do not use this solution. The answer by ronen is much better.

As a DRY solution, you can use the @import statement inside a media query, e.g. like this.

@media screen and (max-width: 1170px) {
    $base_width: 960px;
    @import "responsive_elements";
}
@media screen and (min-width: 1171px) {
    $base_width: 1160px;
    @import "responsive_elements";
}

You define all responsive elements in the file included using the variables defined in the media query. So, all you need to repeat is the import statement.

SASS / SCSS: How can I make a variable change values with , SASS / SCSS: How can I make a variable change values with different media queries? I can't reference the variable in another CSS property as I'd like: but when you started using the mixin named header height on other things outside And then reference these variables in media queries as needed. Variables in queries. If you tried to use a variable in the media query test in Sass 3.1 it would fail by simply spitting out the actual text of the variable name. This is fixed in Sass 3.2, and works pretty much as I always expected it would. $break-small: 320px; $break-large: 1200px; .profile-pic { float: left; width: 250px; @media screen and (max-width: $break-small) { width: 100px; float: none; } @media screen and (min-width: $break-large) { float: right; } }


This isn't possible with SASS, but it is possible with CSS variables (or CSS custom properties). The only drawback is browser support – but there's actually a PostCSS plugin - postcss-css-variables - that "flattens" the use of CSS variables (which gives you support for older browsers, too).

The following example works great with SASS (and with postcss-css-variables you get support for older browsers too).

$mq-laptop: 1440px;
$mq-desktop: 1680px;

:root {
    --font-size-regular: 14px;
    --gutter: 1rem;
}

// The fact that we have to use a `max-width` media query here, so as to not
// overlap with the next media query, is a quirk of postcss-css-variables
@media (min-width: $mq-laptop) and (max-width: $mq-desktop - 1px) {
    :root {
        --font-size-regular: 16px;
        --gutter: 1.5rem;
    }
}

@media (min-width: $mq-desktop) {
    :root {
        --font-size-regular: 18px;
        --gutter: 1.75rem;
    }
}

.my-element {
    font-size: var(--font-size-regular);
    padding: 0 calc(var(--gutter) / 2);
}

This would result in the following CSS. The repetitive media queries will increase the file size, but I have found that the increase is usually negligible once the web server applies gzip (which it will usually do automatically).

.my-element {
  font-size: 14px;
  padding: 0 calc(1rem / 2);
}
@media (min-width: 1680px) {
  .my-element {
  padding: 0 calc(1.75rem / 2);
  }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .my-element {
  padding: 0 calc(1.5rem / 2);
  }
}
@media (min-width: 1680px) {
  .my-element {
  font-size: 18px;
  }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .my-element {
  font-size: 16px;
  }
}

Using media queries, In Responsive Web Design in Sass Part 2 I wrote about using media queries in If you tried to use a variable in the media query test in Sass 3.1 it would CSS .​profile-pic { float: left; width: 250px; } @media only screen and  Variables Inside of a Media Query: Yes. Our first test examines whether or not a variable set in Sass carries over to the body of a media query. The question is one of scope: Can I set a variable outside of a media query and then use it within a media query?


With @ronen's great answer and a map, there's some real power available:

    @mixin styling($map) {
        .myDiv {
            background: map-get($map, 'foo');
            font-size: map-get($map, 'bar');
        }
    }

    @media (min-height: 500px) {
        @include styling((
            foo: green,
            bar: 50px
        ));
    }

    @media (min-height: 1000px) {
        @include styling((
            foo: red,
            bar: 100px
        ));
    }

It's now possible to have lots more DRY media queries targeting .myDiv with a bunch of different values.


Map docs: https://sass-lang.com/documentation/functions/map

Example map usage: https://www.sitepoint.com/using-sass-maps/

SCSS Color Variables, You want Sass to know before compilation which media query a user will The whole point of defining and using variables is that it simplifies that process. expect variables within media queries to start working like it's CSS. Whether you’re using full-blown Bootstrap or just leveraging the familiar grid they will save you time when writing repetitive media queries. Due to the similarities in naming conventions between Bootstrap 3 and 4, these mixins can be easily adapted for both versions.


Sass's `@content` Directive Use Cases, Getting Dynamic with CSS Variables & Media Queries One of my biggest crutches in Sass was the use of variables. I often had my separate Not until recently have I begun using CSS variables heavily. And with this use  CSS Grid layouts: build a huge real-world project with CSS Grid; Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc. Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc. Responsive images in HTML and CSS for faster pageloads


Responsive Web Design in Sass: Using media queries in Sass 3.2, In the following example you can see how to use created mixins in a basic SCSS code: And that's all! The outputted CSS will contain all needed  advanced features of SASS; By the end, you’ll be able to migrate an existing CSS codebase and set up an entire project from scratch! Conclusion. It’s that simple! Writing media queries doesn’t need to be a headache. By using Sass mixins, we have one centralized location in which to manage our media queries.


Define SASS variables within @media directives · Issue #1639 , A media query is a CSS3 module which allows content to render and By using Sass mixins, we have one centralized location in which to  Mainly, because of how we are able to define media queries. 0:07. For instance, we have the handy option of nesting them, 0:10. inside rules, which keeps media queries local to their component. 0:14. So let's go over some of the ways we can refactor our project's media queries. 0:19. So one of the ways we can define media queries with Sass, 0:23