How to use Sass Variables with CSS3 Media Queries ?

SASS Variables: SASS Variables are very simple to understand and use. SASS Variables assign a value to a name that begins with $ sign, and then just refer to that name instead of the value. Despite this, they are one of the most useful tools SASS provides.
SASS Variables provide the following features:

  • Reduce repetition
  • Do complex mathematics
  • Configure libraries
  • and much more …

CSS Media queries: CSS Media Queries are the features of CSS3 which allows specifying when given CSS rules must be applied. Media queries work keeping in mind the capability of the device. They can be used to check many things, for example:

  • Width and height of the viewport
  • Width and height of the device
  • Orientation (landscape or portrait)
  • Resolution of the device

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 Post-CSS variables: The following example works great with SASS (even for older browsers).

filter_none

edit
close

play_arrow

link
brightness_4
code

$width1: 1280px;
$width2: 1720px;
 
:root {
    f-size: 20px;
    f-family: Helvetica, sans-serif;
}
 
@media (min-width: $width1) and (max-width: $width2) {
    :root {
        f-size: 22px;
        f-family: Helvetica;
        ;
    }
}
 
@media (min-width: $mq-hhd) {
    :root {
        f-size: 24px;
        f-family: sans-serif;
        ;
    }
}
 
.my-element {
    font-size: var(f-size);
    color: red;
    font-family: var(f-family);
}

chevron_right


The code would result in the below written CSS output. The repeating media queries will obviously increase the size of the file, but it is found that the increase is usually negligible as soon as the webserver applies compression (which it will usually do by itself).

    .my-element {
        font-size: 20px;
        font-family: Helvetica, sans-serif;
    }

    @media (min-width: 1280px) and (max-width: 1719px) {
        .my-element {
            font-family: Helvetica;
        }
    }

    @media (min-width: 1720px) {
        .my-element {
            font-family: sans-serif;
        }
    }

    @media (min-width: 1280px) and (max-width: 1719px) {
        .my-element {
            font-size: 22px;
        }
    }

    @media (min-width: 1720px) {
        .my-element {
            font-size: 24px;
        }
    }

Using mixins: It lets you have everything in a single file if you want.

filter_none

edit
close

play_arrow

link
brightness_4
code

@mixin change($width) {
 
    // your SCSS here
    #Contents {
        width: $width;
    }
}
 
@media screen and (max-width: 140px) {
    @include change($width: 720px);
}
 
@media screen and (min-width: 1441px) {
    @include change($width: 960px);
}

chevron_right


This code will dispaly the following result.

    @media screen and (max-width: 140px) {
        #Contents {
            width: 720px;
        }
    }

    @media screen and (min-width: 1441px) {
        #Contents {
            width: 960px;
        }
    }



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.