Is there a better way to use SASS variables flexibly in media queries?

Question

I've set up some variables in SASS as follows:

// fundamental layout variables
$raw-layout-var-1: 60px;
$raw-layout-var-2: 200px;

// calculated layout variables
$calc-layout-var-1: #{$raw-layout-var-1} + #{$raw-layout-var-2};

I am attempting to use these variables with media queries so I can do something like the following, and have the calculated variables and the rest of the stylesheet update when the relevant criteria are met. I would like to be able to override the fundamental or calculated variables as I need.

@media only screen and (min-height: 500px) {
    $raw-layout-var-1: 120px;

@media only screen and (min-width: 500px) {
    $raw-layout-var-2: 100px;
}

Currently I have a workaround where all updates to variables use the !global keyword to update them globally, but this results in a somewhat complex setup where the fundamental variables, calculated variables, and the main css sheet are placed in mixins, to be called in each individual media query:

@mixin reset-raw-vars() {
    $raw-layout-var-1: 60px !global;
    $raw-layout-var-2: 200px !global;
}

@mixin update-calc-vars() {
    $calc-layout-var-1: #{$raw-layout-var-1} + #{$raw-layout-var-2} !global;
}

@mixin add-main() {
    div {
        width: $calc-layout-var-1;
        height: $raw-layout-var-1;
    }
}

@media only screen and (min-width: 500px) {
    @include reset-raw-vars();   // resets the raw variables in case these were changed globally in a previous media query
                                 // here you can change any fundamental variables you need
    @include update-calc-vars(); // recalculates calculated variables 
                                 // here you can override how any calculated variables are made
    @include add-main();         // update the rest of the stylesheet with new layout
}

Even worse, if I have a pair of media queries such as those shown in the second code block, I have to manually create a hybrid with both min-height and min-width in order to apply both sets of conditions. Clearly this isn't DRY and could get seriously out of control with even slightly complex responsive pages. I can see from Using Sass Variables with CSS3 Media Queries that SASS doesn't have this functionality - is there a better way than I've outlined above?

That is not possible as you cannot properly translate that into CSS (unless you use [CSS variables](https://caniuse.com/#feat=css-variables)). And frankly, it should not even be necessary as you can use relative units instead of fixed breakpoints. — str, Jan 24 '18 at 14:54
@str sometimes I want to update the relative units! for example, on a small screen `3vmin` might be a nice size for a gap between items, but on a big screen `1vmin` might be better. I am also talking about, for example, a header made of two items - on narrow screens the two items are stacked vertically, and change to be stacked horizontally when there is enough width. this has a knock-on effect on the layout of the rest of the grid i'm using for the whole-age layout. — Brickers, Jan 24 '18 at 15:07
@str i'd like to avoid css variable as they're not widely-enough supported for my liking. when you say 'you cannot properly translate that into CSS', I know that's true, the quoted answer is clear on that. However, I have made a workaround, so it's possible in some loose sense. however, I feel like I haven't created the most succinct solution or one with the least amount of manually duplicated code. — Brickers, Jan 24 '18 at 15:09
You don't necessarily need breakpoints to change the stacking, see [this article](https://silvantroxler.ch/2018/relative-css/) for details. Not sure whether there is a better way than your solution because I cannot really see what your approach actually is (what exactly do these mixins do?). — str, Jan 24 '18 at 15:33
i've updated the question to include the mixin code. thanks for that link. i'm not sure it entirely resolves the need for what I've asked for but it has made me consider whether i've implemented my flexboxes, grids, relative units, etc. in the best way possible. cheers — Brickers, Jan 24 '18 at 15:48

Is there a better way to use SASS variables flexibly in media queries?

0 Answers0