Розширення SASS

Джерело фото: https://goo.su/OXzBTuz

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

Змінні

Думайте про змінні, як про спосіб зберігання інформації, яку ви хочете використовувати протягом написання всіх стилів проекту. Ви можете зберігати в змінних колір, стеки шрифтів або будь-які інші значення CSS, які ви хочете використовувати. Щоб створити змінну в Sass потрібно використовувати символ $. Розглянемо приклад:

СИНТАКСИС SCSS

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

СИНТАКСИС SASS

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
font: 100% $font-stack
color: $primary-color

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

СИНТАКСИС CSS

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

Вкладення

При написанні 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;
    }
}

СИНТАКСИС SASS

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-файл, то на виході ви отримаєте щось на зразок цього:

СИНТАКСИС 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;
}

Бажаємо успіхів!

Джерело: https://goo.su/iMDMvHB
Редактор: Аліна Берестень
Адміністратор: Дмитро Берестень