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 {

Next Page → SCSS mixin

← Previous Page Nested styles

Last updated at 2017-04-19. Show version history


no comments yet.