About Custom CSS Variables

CSS variables like --variable have an advantage against preprocessed SASS variables like $variable, because you can redefine their values at media queries.

For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
:root {
    --text-color: #444;
}

@media print {
    :root {
        --text-color: #000;
    }
}

body {
    color: var(--text-color);
}

Tips and Tricks CSS3