CSS препроцессор SASS/SCSS

SASS — это препроцессор для написания CSS кода. Он дает дополнительные возможности. Например: переменные, вложенные селекторы, миксины, наследования и другие полезные вещи.

У препроцессора SASS есть синтаксис SCSS. У SASS мы не пишем фигурные скобки, точку с запятой в конце css свойства. А у SCSS синтаксис такой же, как у CSS. Мы будем говорить о SCSS, потому он для многих привычнее.

Пример SCSS
body{
  background: #000; 
}

Пример SASS
body
  background: #000

Важно понимать, что браузеры не понимают SCSS. Его надо компилировать в привычный для браузера CSS код, и уже его подключать на страницу.

Для того чтобы скомпилировать SCSS в CSS нужно использовать компилятор. Можно использовать специальные программы, плагины для редактора или сборщики проектов. (https://prepros.io/, https://gulpjs.com/, https://webpack.js.org/ и другие).

Переменные

Способ хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. В переменных можно хранить цвета сайта, шрифты и другие значения. Чтобы создать переменную нужно использовать символ $. Пример:

SCSS Синтаксис

$font-family: Helvetica, sans-serif;
$main-color: #000;

body {
  font: 100% $font-family;
  color: $main-color;
}

CSS OUTPUT

body {
  font: 100% Helvetica, sans-serif;
  color: #000;
}

Вложенности

При написании HTML, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

SCSS Синтаксис

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS OUTPUT

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Импорт

Вы можете импортировать одни файлы в другие при помощи @import

Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss. И мы хотим импортировать _reset.scss в base.scss.

SCSS Синтаксис

// _reset.scss
html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

CSS OUTPUT

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Миксины

Миксины позволяют создавать группы CSS свойств, которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. С помощью миксинов можно создавать целые функции. Например: https://www.youtube.com/watch?v=eaOAY0vIB4U

SCSS Синтаксис

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

CSS OUTPUT

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Расширение/Наследование

Используя @extend можно наследовать наборы свойств CSS от одного селектора другому.

SCSS Синтаксис

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  color: green;
}

CSS OUTPUT

.message, .success,{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  color: green;
}

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

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как +, -, *, / и %.

SCSS Синтаксис

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

CSS OUTPUT

.aside{
  width: 31.25%;
}

Официальная документация: https://sass-scss.ru/documentation/