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