Part 4—CSS Preprocessing

24 SCSS variable

In last section, we put the @media inside a nested selectors in different groups. This leads to an issue that our breakport, 500px, is difined in more than one place.

Preprocessor allows us to define variable. Here is an example of using Scss that define 2 variables, breakpont and the major color.

$breakpoint: 500px;
$major-color: steelblue;

body > header,
body > footer {
    background: $major-color;

@media screen and (min-width: $breakpoint) {
  .one {
    width: 25%;
  .two {
    width: 50%;
  .three {
    width: 75%;
  .four {


SCSS variable Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.