Variables, Mixins, Extends in SCSS

scssabstract.md

Variables, Mixins, and Extends in SCSS

Variables

// declare it
$text-color: red;`

// call it
font-color: $text-color;

Mixins

// declare it
@mixin typography {
  color: white;
  font-size: 1rem;
  text-transform: uppercase;
}

// call it
h1 {
  @include typography;
}

Extends

// declare it
%btn-placeholder {
  padding: 1rem;
  display: inline-block;
  text-align: center;
  border-radius: 100px;
}

// call it
.btn {
  @extend %btn-placeholder;
  background-color: blue;
}