Open In App

How to use Sass Variables with CSS3 Media Queries ?

Improve
Improve
Like Article
Like
Save
Share
Report

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). 
 

css




$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);
}


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. 
 

css




@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);
}


This code will display the following result. 
 

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

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

 



Last Updated : 24 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads