Узнайте, как использовать SASS/SCSS за 10 минут

Сколько раз мы писали один и тот же фрагмент кода CSS для одной HTML-страницы и задавались вопросом, есть ли какой-нибудь инструмент, который мог бы помочь с повторным использованием кода? Что ж, ответ — SASS/SCSS. Это препроцессор, который во время компиляции превращает код в файл CSS.

Sass, или «Syntactically Awesome Stylesheets», является языковым расширением CSS. Он добавляет функции, недоступные при использовании базового синтаксиса CSS. Sass позволяет разработчикам упростить и поддерживать таблицы стилей для своих проектов.

Sass может расширить язык CSS, потому что это препроцессор. Он берет код, написанный с использованием синтаксиса Sass, и преобразует его в базовый CSS. Это позволяет вам создавать переменные, вкладывать правила CSS в другие и импортировать другие файлы Sass, среди прочего. В результате получается более компактный и удобный для чтения код.

Ниже приведены несколько основных концепций SASS:

Переменные для хранения данных:

В Sass переменные начинаются с $, за которым следует имя переменной. Например

$main-fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

Гнездо CSS:

Sass позволяет вкладывать правила CSS, что является полезным способом организации таблицы стилей. Пример SASS-кода

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Эквивалентный код CSS

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

Миксины:

В Sass миксин — это группа объявлений CSS, которые можно повторно использовать во всей таблице стилей.

рассмотрим ниже код CSS

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

Требуется много печатать, чтобы переписать это правило для всех элементов, имеющих box-shadow, или изменить каждое значение для проверки различных эффектов. Миксины похожи на функции для CSS. Вот как написать один:

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

Определение начинается с @mixin, за которым следует пользовательское имя. Параметры ($x, $y, $blur и $c в приведенном выше примере) являются необязательными. Теперь каждый раз, когда требуется правило box-shadow, только одна строка, вызывающая миксин, заменяет необходимость вводить все префиксы поставщиков. Миксин вызывается директивой @include:

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

Операторы управления:

Директива @if в Sass полезна для тестирования в конкретном случае — она работает так же, как оператор if в JavaScript. Как и в JavaScript, @else if и @else проверяют дополнительные условия:

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

Директива @for добавляет стили в цикл, очень похожий на цикл for в JavaScript. @for используется двумя способами: «от начала до конца» или «от начала до конца». Основное отличие состоит в том, что 'начало до конца' исключает конечное число как часть подсчета, а 'начало до конца' включает конечный номер как часть счетчика.

Вот пример от до конца:

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

Часть #{$i} представляет собой синтаксис для объединения переменной (i) с текстом для создания строки. Когда файл Sass преобразуется в CSS, он выглядит так:

.col-1 {
  width: 8.33333%;
}
.col-2 {
  width: 16.66667%;
}
...
.col-12 {
  width: 100%;
}

@each перебирает каждый элемент списка или карты. На каждой итерации переменной присваивается текущее значение из списка или карты.

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

Приведенный выше пример кода преобразуется в следующий CSS:

.blue-text {
  color: blue;
}
.red-text {
  color: red;
}
.green-text {
  color: green;
}

Директива @while — это опция с функциональностью, аналогичной циклу JavaScript while. Он создает правила CSS до тех пор, пока не будет выполнено условие.

Задача @for дала пример создания простой системы сетки. Это также может работать с @while.

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

Частицы:

Партиалы в Sass — это отдельные файлы, содержащие сегменты кода CSS. Они импортируются и используются в других файлах Sass. Это отличный способ сгруппировать похожий код в модуль, чтобы он оставался организованным.

Имена для частичных файлов начинаются с символа подчеркивания (_) и заканчиваются расширением файла .scss. Чтобы перенести код из партиала в другой файл Sass, используйте директиву @import.

Например, если все ваши миксины сохранены в партиале с именем «_mixins.scss», а они нужны в файле «main.scss», вот как использовать их в основном файле:

// In the main.scss file
@import 'mixins'

Продлевать:

В Sass есть функция extend, которая позволяет легко заимствовать правила CSS из одного элемента и использовать их в другом.

Например, приведенный ниже блок правил CSS стилизует класс .panel.

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

Директива extend — это простой способ повторно использовать правила, написанные для одного элемента, а затем добавить еще для другого:

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

.big-panel будет иметь те же свойства, что и .panel, в дополнение к новым стилям.

Все, теперь начинайте использовать SAAS/SCSS