Основи препроцесора Sass: змінні, міксини, оператори, імпорт, вкладеність, спадкування

2

Від автора: CSS сам по собі веселий, однак стилі стають все більше, складніше в обслуговуванні. Тут може допомогти препроцесор. Sass дозволяє використовувати функції, яких поки що немає в CSS. Наприклад, змінні, вкладеність, міксини, спадкування та інші хороші функції, які пожвавлюють CSS.

Як тільки почнете працювати з Sass, він обробить Sass-файл і зберегти його у вигляді звичайного CSS файл, який можна використовувати на сайті.

Самий прямий шлях через термінал. Після установки Sass з терміналу можна запустити sass input.scss output.css. Стежити можна як за окремими файлами, так і за всіма директоріями. Крім того, стежити за каталогами або директоріями можна за допомогою прапора —watch. Приклад запуску Sass і відстеження цілої директорії:

sass —watch app/sass:public/stylesheets

Змінні

Уявіть змінні, як спосіб зберігання інформації, яку можна використовувати повторно в стилях. Зберігати можна кольору, стеки шрифтів або будь-які значення CSS, які необхідно повторно використовувати. Sass використовує символ $ для створення змінної. Приклад:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}

Коли Sass відпрацює, він замінить змінні $font-stack і $primary-color на нормальні значення CSS і помістить їх в код. Це дуже зручно при роботі з квітами бренду і їх послідовному поширенні на сайті.

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

Вкладеність

При написанні HTML ви могли помітити, що він має чітку вкладену і візуальну ієрархію. CSS ж такої структури не має.

Sass дозволяє використовувати схожу з HTML візуальну ієрархію вкладеності CSS селекторів. Врахуйте, що занадто складні правила вкладеності призведуть до ускладнення CSS, і його буде важко обслуговувати. Це погана практика.

Приклад типових стилів для навігації на сайті:

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

Зверніть увагу на те, як ul, li a селектори вкладені всередину nav. Це відмінний спосіб організувати CSS і зробити його більш читабельним. Після генерації CSS ви отримаєте приблизно наступне:

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

Фрагменти

Ви можете створювати фрагментные файли Sass, в яких будуть зберігатися невеликі шматочки CSS, і ці файли можна підключати до інших Sass файли. Це відмінний спосіб створення модульного CSS, спрощує обслуговування коду. Фрагмент – це просто Sass файл, в імені якого перший символ нижнє підкреслення. Файли можна називати приблизно так _partial.scss. Нижнє підкреслення дозволяє Sass зрозуміти, що це всього лише фрагмент, і його не потрібно генерувати в CSS файл. Sass фрагменти підключаються за допомогою директиви @import.

Імпорт

В CSS є важлива опція, за допомогою якої можна розбити CSS на менші, більш обслуговуються шматочки. Єдиний мінус – кожен раз, коли в CSS зустрічається @import, відбувається HTTP-запит. Sass побудований на основі CSS @import, однак замість HTTP-запиту Sass поєднає імпортований файл із основним файлом, щоб ви могли завантажити всього один CSS файл в браузер.

Наприклад, у вас є пара Sass файлів _reset.scss і base.scss. Ми хочемо імпортувати _reset.scss в base.scss.

// _reset.scss
html
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import ‘reset’;
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

Зверніть увагу, що ми використовуємо @import ‘reset’; base.scss. Коли ви імпортуєте файл, не треба вказати його розширення .scss. Sass розумний і сам все зрозуміє. Після генерації CSS:

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

Міксини

Деякі речі в CSS трохи втомлює писати, особливо в CSS3, де так багато вендорних префіксів. Міксин дозволяє згрупувати CSS оголошення, які можна повторно використовувати на сайті. Можна навіть передавати значення, щоб mixin був ще більш гнучким. Хороший приклад використання – вендорные префікси. Приклад для border-radius.

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }

Щоб створити міксин, використовуйте директиву @mixin і задайте ім’я. Ми назвали наш міксин border-radius. Ми також використовуємо змінну $radius всередині фігурних дужок. Тобто ми можемо передавати радіус або щось інше. Після створення міксин можна використовувати CSS. Для цього необхідно написати @include, після чого слідує ім’я міксина. Після генерації CSS-код буде наступним:

.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

Розширення/спадкування

Одна з найкорисніших особливостей Sass. Директива @extend дозволяє ділитися набором CSS-властивостей між селекторами. Це допомагає не повторюватися в Sass. У нашому прикладі ми створимо прості серії повідомлень помилок, попереджень і успіху.

.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}

Код вище дозволяє взяти CSS-властивості .message і застосувати їх до .success, .error і .warning. У створеному CSS відбувається магія, і це не дозволяє привласнювати HTML-елементів кілька класів. Код:

.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}

Оператори

Можливість робити обчислення в CSS дуже корисна. У Sass є кілька стандартних математичних операторів типу +, -, *, / і %. У нашому прикладі ми будемо обчислювати ширину для aside і article.

.container { width: 100%; }
article[role=»main»] {
float: left;
width: 600px / 960px * 100%;
}
aside[role=»complementary»] {
float: right;
width: 300px / 960px * 100%;
}

Ми створили дуже просту гнучку сітку на основі 960px. Операції в Sass дозволяє конвертувати пікселі у відсотки без зайвих складнощів. Згенерований CSS-код:

.container {
width: 100%;
}
article[role=»main»] {
float: left;
width: 62.5%;
}
aside[role=»complementary»] {
float: right;
width: 31.25%;
}