Особливості SASS

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

SASS — це метамова на основі CSS, призначена для збільшення рівня абстракції CSS коду та спрощення файлів каскадних таблиць стилю.

SASS надає більше можливостей і свободи при написанні CSS для створення сайтів. Це як програмна мова всередині CSS. Ви можете використовувати щось подібне до функцій зі змінними, логічно структурувати ваш код (структурованість стилів і класів).

SASS має два синтаксиса. Новий основний синтаксис відомий як "SCSS" (SassyCSS), розширений синтаксис CSS3. Це означає, що кожен чинний стиль CSS3 валідний в SCSS також. SCSS файли мають розширення ".scss"

Другий, більш старий синтаксис відомий як SASS. Натхненний стислістю HAML, він призначений для тих, хто віддає перевагу лаконічності CSS. Замість фігурних дужок і крапок з комою, використовуються відступи. SASS синтаксис вже не є основним на даний момент, але він надалі буде підтримуватися. Файли з SASS синтаксисом використовують розширення ".sass".

SASS vs SCSS

//SASS
.content
    border: 1px solid red
    color: black

.border
    padding: 10px
    margin: 10px

//SCSS
.content {
    border: 1px solid red;
    color: black;
}

.border {
    padding: 10px;
    margin: 10px; }

Особисто я рекомендую використовувати SCSS синтаксис, бо він більш читабельний і зрозумілий. Як видно, синтаксис SCSS нічим не відрізняється від синтаксису CSS. Але при цьому він має масу корисних можливостей, які можуть полегшити життя верстальщика.

Можливості SASS

🡲 Variables (Змінні)
🡲 Nesting (Вкладеність)
🡲 Mixins (Міксини)
🡲 Selector Inheritance (Наслідування правил селекторів)

Variables (Змінні)

Скрізь використовуєте один колір? Вам необхідно зробити деякі розрахунки висоти, ширини або розміру тексту? SASS підтримує змінні, а також основні математичні операції і безліч корисних функцій.

$color = #000;
$spacing = 10px;
.content {
    border: 1px solid red;
    color: $color;
}

.border {
    padding: $spacing;
    margin: $spacing;
}

Nesting (Вкладеність)

SASS може уникнути повторення селекторів шляхом вкладення їх один в одного. Так само працює з властивостями.

.content {
    margin: 2em 0;
p {
    text-align: right;
    font-size: 14px;
    }
}

body{
    color: $color
    font: {
        family: serif;
        weight: bold;
        size: 1.2em;
    }
}

Mixins(Міксини)

Міксини дозволяють повторно використовувати цілі шматки CSS, їх селектори і властивості, ще більш корисно, аніж змінні. Ви навіть можете задати аргументи. Грубо кажучи, міксини - це CSS "функції".

@mixin table {
    th {
        text-align: center;
        font-weight: bold;
    }
        td, th {padding: 2px}
}

@mixin left($dist) {
    float: left;
    margin-left: $dist;
}

#data {
    @include left(10px);
    @include table;
}

Selector Inheritance (Наслідування правил селекторів)

Sass може успадковувати стилі примінені до певного селектору без дублювання CSS властивостей.

.error {
    border: 1px #f00;
    background: #fdd;
}

.warning {
    font-size: 1.3em;
    font-weight: bold;
}

.badError {
    @extend .error;
    border-width: 3px;
}

Компіляція SASS в CSS

Якщо у вас є файли (SCSS або SASS), в яких ви пишете на Sass. Браузери не розуміють такий синтаксис. Браузери розуміють тільки CSS, отже, нам потрібно передати наші стилі в форматі CSS. Для цього наші sass/scss потрібно скомпілювати. Найпростіший спосіб це розширення вашого редактора яке вміє компілювати код.

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

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