Sass Інтро
Що ви вже повинні знати?
Перш ніж продовжити, ви повинні мати базове розуміння наступного:
Якщо ви хочете спочатку вивчити ці предмети, знайдіть підручники на нашому сайті W3Schools українською.
Що таке Sass?
- Sass означає Syntactically Awesome Stylesheet (Синтаксично дивовижна таблиця стилів)
- Sass є розширенням CSS
- Sass — це препроцесор CSS
- Sass повністю сумісний з усіма версіями CSS
- Sass зменшує повторення CSS, отже, економить час
- Sass був розроблений Hampton Catlin і розроблений Наталі Вейзенбаум у 2006 році
- Sass можна завантажити та використовувати безкоштовно
Навіщо використовувати Sass?
Таблиці стилів стають більшими, складнішими, і їх важче підтримувати. Тут може допомогти препроцесор CSS.
Sass дозволяє використовувати функції, яких немає в CSS, як-от змінні, вкладені правила, міксини, імпорт, успадкування, вбудовані функції та інші речі.
Простий приклад того, чому Sass корисний
Припустімо, у нас є вебсайт із трьома основними кольорами:
#a2b9bc
#b2ad7f
#878f99
Отже, скільки разів вам потрібно ввести ці шістнадцяткові значення? Багато разів. А як щодо варіантів однакових кольорів?
Замість того, щоб багато разів вводити наведені вище значення, ви можете скористатися Sass і написати це:
Sass Приклад
/* визначте змінні для основних кольорів */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* використовуйте змінні */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
Отже, коли використовується Sass і змінюється основний колір, вам потрібно змінити його лише в одному місці.
Як працює Sass?
Браузер не розуміє код Sass. Тому вам знадобиться попередній процесор Sass, щоб перетворити код Sass на стандартний CSS.
Цей процес називається транспілюванням. Отже, вам потрібно надати транспілятору (якійсь програмі) код Sass, а потім отримати код CSS назад.
Підказка: Транспілювання — це термін, що означає взяти вихідний код, написаний однією мовою, і перетворити/перекласти його іншою мовою.
Тип файлу Sass
Файли Sass мають розширення файлу ".scss".
Коментарі Sass
Sass підтримує стандартні коментарі CSS /* комент */, а також вбудовані коментарі // комент:
Sass Приклад
/* визначити основні кольори */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* використати змінні */
.main-header {
background-color: $primary_1; // тут ви можете залишити внутрішній коментар
}
