SCSS за 5 минут

SCSS — "диалект" языка SASS.
SASS — это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода.

Переменные

Для создания переменной просто добавьте $ и название переменной.
Например:

$black-color: rgba(0, 0, 0, 1);
.elem {
color: $black-color
}

Вложенность

SCSS поможет писать чистый и короткий код CSS
Например:

.container {
max-width: 1140px;
padding-left: 15px;
padding-right: 15px;
&-fluid {
max-width: 100%;
}
div {
flex: 0 0 100%;
}
}

Наследование

@extends поможет вам наследовать свойства других классов.
Например:

.header {
color: white;
}
.footer {
@extend .header;
background-color: black;
}

Миксины

Миксины это предустановленные наборы свойств.
Например:

@mixin white-color {
color: white;
}
.header {
@include white-color;
}