How to use Sass Variables with CSS3 Media Queries ? - GeeksforGeeks

24 Jun, 2021
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 the Post-CSS variables
Using mixins
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;
        }
    }
 
gabaa406
CSS-Misc
Picked
SASS
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript