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

Comments

no comments yet.

Please login to chat.