SCSS

SCSS – это синтаксис препроцессора SASS, позволяющего в разы ускорить скорость написания стилей. В отличие от оригинального синтаксиса SASS имеет более привычный вид, схожий с обычным css.

Вложенность

Вложенность – это способность препроцессора SASS (как в оригинальном синтаксисе, так и в SCSS) писать правила css внутрь других правил.

// пример уникального оператора "and", который дублирует имя родителя

//для псевдоклассов и псевдоєлементов:
.link {
  color: blue;
  text-decoration: underline;
  &:hover {
    color: green;
  }
  &:before {
    conten: '';
  }
  &:after {
    content: '';
  }
}

//для вложенных блоков:
.block {
  width: 300px;
  padding: 30px;
  font-size: 10px;
  &.block--big{  //в css мы получим .block.block--big
    font-size: 30px;
  }
}

//можно делать и вот так (хотя можно было обратиться и задать стили к link внутри .block:
.link {
  color: blue;
  text-decoration: underline;
  .block & { //здесь мы тоже вместо & получим название родителя (link), в итоге имеем .block link после компиляции
    color: green;
  }
}

Переменные

Переменную удобно использовать, чтобы в будущем массово вносить изменения, что полезно для больших проектов. Они объявляются при помощи знака доллара – &.

Простой пример:

$fz: 30px; //это переменная с именем fz
$color1:#000

.block {
  width: 300px;
  padding: $fz;
  font-size: $fz;
  background-color: $color1;
}

Импорт

SASS поддерживает импорт файлов со стилями. Например, нам нужно подключить файл с обнуляющими стилями nullstyle.scss в наш основной файл style.scss. Для этого просто прописываем в style.scss @import "nullstyle.css"; Теперь при компиляции style.css он будет содержать обнуляющие стили.

Нюансы использования

Когда у нас компилируется файл style.css, в который импортировался nullstyle.scss, то рядом создается и  nullstyle.css. Но он нам не нужен, так как в даном случае его содержимое уже будет в style.css. Мы можем его просто удалить. Либо, чтобы не генерировался отдельный css файл, к имени scss файла можно спереди добавлять нижнее подчеркивание, например, _nullstyle.scss.

Шаблоны

Шаблоны – это своего рода переменные, но содержащие не значение стиля, а сам стиль или даже много стилей. Они обозначаются при помощи знака процентов – %. А чтобы его вызвать – @extend.

Также шаблон можно прописать, как класс, т.е. начиная с точки, а не знака процентов. И потом при вызове тоже будет использован не знак процента, а точка. Но есть одно отличие при таком вызове, описанное в нюансах использования ниже.

%tplborder { //создали шаблон для пунктирного подчеркивания снизу элементов
  border-bottom: 5px dashed red;
}

.link {
  color: blue;
  text-decoration: underline;
  @extend %tplborder; применили шаблон
}

Нюансы использования

1. Если мы под шаблоном назначим такой же стиль, который он давал, то этот стиль переназначит шаблоновский. Например:

%tplborder {
  border-bottom: 5px dashed red;
  color: red;
}

.link {
  color: blue;
  text-decoration: underline;
  @extend %tplborder;
  color: blue; //ссылки будут синими, а не красными, так как этот стиль объйвлен ниже шаблона
}

2. Но! Если вызов шаблона перенести ниже его вызова, то его стили не переназначатся и будут применены:

.link {
  color: blue;
  text-decoration: underline;
  @extend %tplborder;
  color: blue; //ссылки останутся красными, как задано в шаблоне, так как он объявлен ниже
}
%tplborder {
  border-bottom: 5px dashed red;
  color: red;
}

3. Содержимое шаблона, объявленного через знак процентов (%), не будет выведено нигде в файле css после компиляции, если этот шаблон нигде не вызывался в scss. А вот если объявлять шаблон через точку (как обычный класс), то он будет в любом случае прописан в css файле после компиляции, что логично, ведь для компилятора это просто класс.

Миксины (примиси)

Миксины похожи на стили, но более функциональные. Они напоминают функции js, так как тоже принимают внутрь себя параметры, которые тоже указываются в скобках. При объявлении пишется @mixin и дальше идет название, а при вызове пишется @include и потом название миксина.

@mixin fontz($f, $c) {
  font-size: $f;
  color: $c;
}

.link {
  text-decoration: underline;
  @include fontz(15px, #000)
}

Математические операторы

Для вычисления размера блоков (и не только) в процентах можно применять математические операторы. Например:

.block {
  width: 300px / 960px * 100%;
}

Комментирование

Если в scss комментарий обернуть, как в обычном css в */ комментарий */, то он отобразится и в скомпилированом css файле, т.е. его можно будет посмотреть через браузер. Но если применить двойной слеш //комментарий, то такой комментарий не будет выведен в css.

Другое

Также SASS поддерживает функции и директивы, такие как @if, @for, @each, @while.