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 {
  }
}