Зміст
- Що таке препроцесор CSS?
- Що таке Сасс?
- Як користуватися Sass
- Синтаксис
- Змінні
- Вкладання
- Учасники
- Імпорт
- Міксіни
- Розширення / спадкування
- Оператори
Що таке Сасс? Це питання, на яке ми тут повинні відповісти. Якщо ви новачок у веб-дизайні, ви, напевно, чули, як цей термін плаває, але, можливо, ви не зовсім в курсі того, що таке Sass, що робить і чи варто використовувати його чи ні. Коротше кажучи, Sass - це препроцесор CSS, який додає спеціальні функції, такі як змінні, вкладені правила та міксини (іноді їх називають синтаксичним цукром) у звичайний CSS. Мета полягає в тому, щоб зробити процес кодування простішим та ефективнішим. Давайте розберемося детальніше.
Щоб отримати більше інструментів, ознайомтеся з нашим посібником з найкращі фреймворки CSS і верх інструменти веб-дизайну спробувати.
- Найкращі редактори коду
Що таке препроцесор CSS?
Препроцесор CSS - це мова сценаріїв, яка розширює CSS, дозволяючи розробникам писати код однією мовою, а потім компілювати його в CSS. Sass, мабуть, є найпопулярнішим препроцесором на даний момент, але інші відомі приклади включають Less і Stylus.
Перш ніж рухатись далі, належить швидке оголошення про публічну послугу: більшість веб-дизайнерів скажуть, що якщо ви новачок у CSS, краще уникати Sass (або будь-яких попередніх процесорів, розширень чи фреймворків), поки ви ще навчання. Хоча це правда, що вони пропонують багато переваг у швидкості та ефективності, важливо, щоб ви дійсно впоралися з основами CSS. Обов’язково вивчіть основні поняття, перш ніж починати вивчати ярлики та заплутувати речі.
Що таке Сасс?
Sass (що розшифровується як «Синтаксично чудові таблиці стилів)» - це розширення CSS, яке дозволяє використовувати такі речі, як змінні, вкладені правила, вбудований імпорт тощо. Це також допомагає організувати речі і дозволяє швидше створювати таблиці стилів.
Sass сумісний з усіма версіями CSS. Єдина вимога для його використання - це те, що ви повинні встановити Ruby. Користувачів також просять дотримуватися Правил спільноти Sass.
Як користуватися Sass
У наступному розділі ми викладемо кілька основних порад щодо використання Sass на прикладах з офіційного веб-сайту Sass. Погляньте на документацію Sass, щоб отримати додаткові посилання та приклади.
Синтаксис
Sass включає два варіанти синтаксису:
- SCSS (Sassy CSS): Використовує .scss розширення файлу і повністю відповідає синтаксису CSS
- З відступом (просто називається „Sass“): Використовує .sass розширення файлу та відступ, а не дужки; він не повністю відповідає синтаксису CSS, але швидше пишеться
Зверніть увагу, що файли можуть бути перетворені з одного синтаксису в інший за допомогою sass-конвертувати команди.
Змінні
Як і інші мови програмування, Sass дозволяє використовувати змінні, які можуть зберігати інформацію, яку ви можете використовувати у вашій таблиці стилів. Наприклад, ви можете зберегти значення кольору у змінній у верхній частині файлу, а потім використовувати цю змінну при встановленні кольору ваших елементів. Це дозволяє швидко змінювати кольори, не змінюючи кожен рядок окремо.
Наприклад:
$ font-stack: Helvetica, sans-serif; $ основний колір: # 333; body {font: 100% $ font-stack; колір: $ основний колір; }
Буде створено наступний CSS:
body {шрифт: 100% Helvetica, без засічок; колір: # 333; }
Вкладання
Гніздування - це двосічний меч. Незважаючи на те, що він забезпечує чудовий метод зменшення кількості коду, який вам потрібно написати, він також може призвести до надмірно кваліфікованого CSS, якщо його не виконати ретельно. Ідея полягає в тому, щоб вкласти ваші селектори CSS таким чином, щоб імітувати вашу ієрархію HTML.
Далі показано основний стиль навігації, який використовує вкладеність:
nav {ul {поле: 0; заповнення: 0; стиль стилю: немає; } li {display: inline-block; } a {display: block; заповнення: 6px 12px; оформлення тексту: жодного; }}
Вихід CSS такий:
nav ul {поле: 0; заповнення: 0; стиль стилю: немає; } nav li {display: inline-block; } nav a {display: block; заповнення: 6px 12px; оформлення тексту: жодного; }
Учасники
Частинки - це менші файли Sass, які можна імпортувати (див. Наступний розділ) в інші файли Sass. Подумайте про частки як про фрагменти коду. Завдяки цим фрагментам коду ваш CSS тепер може бути модульним та простішим у обслуговуванні. Частинка позначається як така, називаючи її провідним підкресленням: _partial.scss.
Імпорт
Використовується з частинами (див. Попередній розділ), @import директива дозволяє імпортувати ваші часткові файли в поточний файл, щоб створити один єдиний файл CSS. Пам’ятайте, скільки імпорту ви використовуєте як HTTP-запит, буде створено для кожного з них.
// _reset.scss html, body, ul, ol {margin: 0; заповнення: 0; }
// basefile.scss @import ‘скидання’; body {шрифт: 100% Helvetica, без засічок; фон-колір: #efefef; }
І відповідний вихід CSS:
html, body, ul, ol {поле: 0; заповнення: 0; } body {шрифт: 100% Helvetica, без засічок; фон-колір: #efefef; }
Примітка. Під час імпорту часткових частин не потрібно включати розширення файлу або підкреслення.
Міксіни
Однією з переваг використання препроцесорів є здатність приймати складний довготривалий код та спрощувати його. Тут міксини стають в нагоді!
Наприклад, якщо вам потрібно включити префікси постачальників, ви можете замість них використати міксин. Погляньте на цей приклад для межа-радіус:
@mixin border-radius ($ radius) {-webkit-border-radius: $ radius; -moz-border-radius: $ радіус; -ms-border-radius: $ радіус; межа-радіус: $ радіус; } .box {@include border-radius (10px); }
Зверніть увагу на @mixin директива вгорі. Їй дали назву межа-радіус і використовує змінну $ радіус як його параметр. Ця змінна використовується для встановлення значення радіуса для кожного елемента.
Пізніше, @включати директива, а також назва міксину (межа-радіус) та параметр (10 пікс). Таким чином .box {@include border-radius (10px); }.
Виробляється наступний CSS:
.box {-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; радіус межі: 10 пікселів; }
Розширення / спадкування
@extend директиву названо однією з найпотужніших функцій Сасса. Побачивши це в дії, стає зрозуміло чому.
Ідея полягає в тому, що за допомогою цієї директиви вам не доведеться включати кілька імен класів у ваші елементи HTML, і ви можете зберегти свій код СУХИМ (не повторюйтесь). Ваші селектори можуть успадкувати стилі інших селекторів, а потім їх легко розширити, коли це потрібно. Тепер це потужно.
Оператори
Наявність можливості виконувати обчислення у вашому CSS дозволяє зробити більше, наприклад, перетворити значення пікселів у відсотки. Ви матимете доступ до стандартних математичних функцій, таких як додавання, віднімання, множення та ділення. Звичайно, ці функції можна поєднувати для створення складних розрахунків.
Крім того, Sass включає кілька вбудованих функцій, які допомагають маніпулювати цифрами. Функції типу процент(), підлога () і круглі () назвати декілька.
