Menu icon Foundation
SASS variables not working in media queries

Can SASS variables work in media queries. This code works:

@media (min-width:44em) {
.top-bar .name h1 a {
font-size: rem-calc(26);
}
}

but this doesn't:

@media (min-width:44em) {
$topbar-title-font-size: rem-calc(26);
}

...because the variable appears to break the media query so the query disappears from the css produced and only the contents remains.

variablesmedia queriesSass

Can SASS variables work in media queries. This code works:

@media (min-width:44em) {
.top-bar .name h1 a {
font-size: rem-calc(26);
}
}

but this doesn't:

@media (min-width:44em) {
$topbar-title-font-size: rem-calc(26);
}

...because the variable appears to break the media query so the query disappears from the css produced and only the contents remains.

Karl Ward about 5 years ago

You can't set a variable through a media query ... Media queries are CSS, and happen on the clients browser, while SASS variables are pre-processed. The CSS including the media query has to actually render into valid CSS, and you can't render a variable in CSS.

You have to do it similar as Roland suggests, by presetting SASS vars, and then applying them into media queries:

$topbar-title-font-size: rem-calc(20); 
$topbar-title-font-size-medium: rem-calc(23); 
$topbar-title-font-size-large: rem-calc(26); 

.element {
  font-size: $topbar-title-font-size; // default mobile up
  @media (min-width:60em) { 
    font-size: $topbar-title-font-size-medium; // medium-up 
  }
  @media (min-width:80em) { 
    font-size: $topbar-title-font-size-large; // large-up 
  }
}

Roland about 5 years ago

I'm not sure what you are trying to do, but your example should indeed not output anything within the media query. You only defined a variable within a media query.

If you would like your variables grouped, you could do the following:

$topbar-title-font-size: 26;
$topbar-title-font-size-big: 30;

    .top-bar .name h1 a {
            font-size: rem-calc($topbar-title-font-size); 

            @media #{$medium-up} {
                font-size: rem-calc($topbar-title-font-size-big); 
            }
        }

J Ward about 5 years ago

Thank you for the response.

I'm trying to simply change the size of my title when my screen is above a certain dimension. Although I can do that through editing the specific element I thought I'd be able to change it by simply changing the value of the $topbar-title-font-size variable.

So in the settings file I declare the variable as: $topbar-title-font-size: rem-calc(20);

...but thought I'd then be able to set its value to something else by simply declaring a new value for the variable like so: $topbar-title-font-size: rem-calc(26); within a media query.

Julia Kazban about 3 years ago

This would be a great feature! I would like it if I changed one variable for media query and Sass found all uses of variable and print it in media query. Could be useful sometimes, e.g. when need to change headings font size for mobile devices.

Is there a chance that it will be real? :D

Andrew Revinsky almost 5 years ago

You know, with all due respect, SASS just could determine whether a variable gets to change its value inside @media queries and produce output accordingly.

For instance, ZURB uses $topbar-height variable to control the height of the top bar.

How do I easily make different heights for small and medium, without overloading native code that is? It seems there's no way.

What SASS just could do is creating a shadow variable with attributes marking the media-query adherence. And when the consecutive code parts require this variable the pre-processor would have to generate versions of the code for each version of the variable (with the grouping, of course).

Christian Matthias over 4 years ago

@karl_ward

Christian Matthias over 4 years ago

@karl_ward thanks man...

here is what I have done to make it a little better. quick question. Is this a SASS thing where you can go right below the element in the css directive and issue a media query like the first example?

I added a new top bar scss file and then I import it into the main deal and added my media queries like so

// custom top bar adjustments

// .top-bar {
// @media #{$medium-only} {background: $oil; }
// }

@media #{$medium-only} {
.top-bar {background: $oil;}
}

I prefer the second example because everything that needs to be medium i can just put in one place rather than organizing by a bunch of classes.

*** What would be awesome is if I could somehow take the variable and just focus on that. for example

.top-bar {
@media #{$medium-only} {$topbar-bg: blue; }
}

it would be nice if it took the top bar and every class that added a variable of $topbar to an property element it would change that to i.e. blue. This way you would have to focus on finding a bunch of stuff to figure what to change. however, I can redo the variable to anything I want so this will surely work for now.

AWESOME!!! thanks.

banacan over 4 years ago

I'm really surprised to learn that Sass can't define (or re-define) variable values within @media directives. This seems to me to be a significant shortcoming. To change the top-bar background color of child (dropdown) navigation items on desktop, one must add the following CSS rule within an @media directive:

@media #($large-up) {
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {background-color:#333;}
}

If SASS allowed defining variables within @media directives, one would only have to change the value of the variable:

@media #($large-up) {
$topbar-dropdown-bg:#333;
}

The above examples illustrate just how difficult it is to find the correct selector(s) to make the change(s), but how easy it is to change one variable. This is precisely why I began using SASS, to get away from the cumbersome, difficult over-ride CSS, in favor of simplified variable usage. Frustrating!

Tim Malone over 3 years ago

Interesting idea raised in this post... however I don't see how SASS could be expected to re-output everything if you change a variable in a media query.

Would the pre-processor be expected to go and find everytime you've used that variable, and re-output each of those lines of code again, wrapped in a media query? How far would the scope extend?