Просте і легке керівництво для розуміння Sass
Нещодавно Thoriq Firdaus написала чудову статтю про початок роботи з Sass, яка показала вам, як встановити та використовувати цю дуже корисну мову препроцесора CSS (ви можете перевірити це, знаєте, щоб почати).
У цій статті я подумав, що я дам вам трохи більше розуміння того, що ви можете зробити з Sass і як розробники використовують його щодня для створення кращого і більш модульного CSS-коду. Перейдіть до потрібного розділу:
- Інструменти торгівлі
- Змінні
- Вкладання
- Розширення наборів правил
- Міксини
- Закладки селекторів
- Операції
- Функції
Інструменти торгівлі
Торік показав вам, як ви можете використовувати Sass з командного рядка за допомогою sass - годинник команду.
Якщо ви віддаєте перевагу інструментам GUI, ви можете скористатися моїм улюбленим додатком, Codekit, інструментом веб-розробника для компіляції Sass, конкатенації, автоматичного виправлення та багато іншого. Prepros є ще одним дуже здатним додатком, який можна використовувати на всіх системах. Обидва платних додатків але добре варто, якщо ви будете використовувати їх у довгостроковій перспективі.
Якщо ви просто хочете спробувати Sass не платячи ні за що Ви можете скористатися терміналом, або Koala (тут нашим оглядом), безкоштовним багатофункціональним багатофункціональним додатком, який може утримувати свої позиції від аналогів преміум-класу..
Змінні
Одним з перших речей, які потрібно обгорнути, є змінні. Якщо ви прийшли з PHP або іншої подібної мови кодування, це стане вам другою природою. Змінні для зберігання бітів і фрагментів багаторазової інформації, на зразок значення кольору, наприклад:
$ primary_color: # 666666; .button color: $ primary_color; .important color: $ primary_color;
Це не може здатися тут корисним, але уявіть, що маєте 3000 рядків коду. Якщо зміна колірної схеми потрібно замінити кожне значення кольору в CSS. З Sass ви можете просто змінити значення з $ primary_color мінлива і робити з нею.
Для змінних використовуються зберігання назв шрифтів, розмірів, кольорів та іншої інформації. Для великих проектів, можливо, варто витягти всі ваші змінні в окремий файл (ми розглянемо, як це буде зроблено найближчим часом). Це дозволяє вам перефарбувати весь проект і змінити шрифти та інші ключові аспекти не торкаючись фактичних правил CSS. Все, що потрібно зробити, це змінити деякі змінні.
Вкладання
Ще одна основна функція, яку дає вам Sass можливість гнізда правил. Припустимо, ви створюєте навігаційне меню. У вас є nav елемент, який містить невпорядкований список, елементи списку та посилання. У CSS ви можете зробити щось подібне:
#header nav / * Правила для зони навігації * / #header nav ul / * Правила меню * / #header nav li / * Правила для елементів списку * / #header nav a / * Правила для посилань * /
У селекторах ми багато повторюємо себе. Якщо елементи мають спільні коріння, ми можемо використовувати вкладений до пишіть наші правила набагато чистіше.
Наведений вище код може виглядати в Sass:
#header nav / * Правила для зони навігації * / ul / * Правила меню * / li / * Правила для елементів списку * / a / * Правила для посилань * /
Гніздування є надзвичайно корисним, тому що це робить таблиці стилів (багато) більш читабельними. Використовуючи вкладання разом з відповідним відступом ви можете досягти високо чіткі структури коду, навіть якщо ви маєте достатню кількість коду.
Один недолік вкладеності полягає в тому, що він може призводять до непотрібної специфіки. У наведеному вище прикладі я посилався на посилання з #header nav a. Ви також можете використовувати #header nav ul li a що, мабуть, буде занадто багато.
У Sass це набагато простіше бути дуже специфічним, оскільки все, що потрібно зробити, - це вкласти правила. Наведене нижче набагато менш читабельне і досить специфічне.
#header nav / * Правила для зони навігації * / ul / * Правила для меню * / li / * Правила для елементів списку * / a / * Правила для посилань * /
Розширення наборів правил
Розширення буде знайоме, якщо ви працюєте з об'єктно-орієнтованими мовами. Найкраще зрозуміти на прикладі, створимо 3 кнопки, які є невеликими варіаціями один одного.
.кнопка display: inline-block; колір: # 000; фон: # 333; кордон-радіус: 4px; заповнення: 8px 11px; .button-primary @extend .button; background: # 0091C2 кнопка-маленька @extend .button; розмір шрифту: 0.9em; заповнення: 3px 8px;
The .кнопка-первинна і .кнопка-маленька класи всі розширюють .кнопки клас, що означає, що вони беруть на себе всі його властивості і потім визначають свої власні.
Це надзвичайно корисно в багатьох ситуаціях, коли можна використовувати варіації елемента. Повідомлення (попередження / успіх / помилка), кнопки (кольори, розміри), типи меню тощо можуть використовувати функцію розширення для підвищення ефективності CSS.
Одне застереження про продовження - це вони не будуть працювати в медіа-запитах як і слід було очікувати. Це трохи більш просунуте, але ви можете прочитати все про цю поведінку в розділі "Розуміння заповнювачів" - селектори заповнювачів - це особливий вид розширення, про який ми скоро розповімо..
Міксини
Mixins - ще одна улюблена функція користувачів препроцесора. Mixins - це повторно використовувані набори правил - ідеально підходять для специфічних для постачальників правил або для скорочення довгих правил CSS.
Як щодо створення правила переходу для елементів наведення:
@mixing hover-effect -webkit-transition: фоновий колір 200ms; -moz-перехід: фоновий колір 200ms; -о-перехід: фоновий колір 200мс; перехід: фоновий колір 200мс; включити ефект зависання; .button @include hover-effect;
Mixins також дозволяють використовувати змінні для визначити значення в суміші. Ми могли б переписати приклад вище дають нам контроль над точним часом переходу. Наприклад, ми можемо хотіти, щоб кнопки переходили трохи повільніше.
@mixin hover-effect ($ speed) -webkit-transition: фоновий колір $ speed; -moz-перехід: фоновий колір $ speed; -o-перехід: фоновий колір $ speed; перехід: фон-колір $ швидкість; включити ефект зависання (200 мс); .button @include hover-ефект (300 мс);
Закладки селекторів
Заповнювачі селекторів були введені з Sass 3.2 і вирішили проблему, яка могла б викликати трохи наворотів у створеному вами коді CSS. Погляньте на цей код, який створює повідомлення про помилки:
.повідомлення font-size: 1.1em; заповнення: 11px; border-width: 1px; стиль кордону: твердий; .message-danger @extend .message; фон: # C20030; колір: #fff; border-color: # A8002A; .message-success @extend .message; фон: # 7EA800; колір: #fff; border-color: # 6B8F00;
Цілком імовірно, що клас повідомлень ніколи не буде використовуватися в нашому HTML: він був створений для розширення, не використовується як є. Це викликає трохи наворотів у створеному CSS. Щоб зробити ваш код більш ефективним, можна скористатися селектором заповнювачів, який позначається знаком відсотка:
% message font-size: 1.1em; заповнення: 11px; border-width: 1px; стиль кордону: твердий; .message-danger @extend% button; фон: # C20030; колір: #fff; border-color: # A8002A; .message-success @extend% кнопка; фон: # 7EA800; колір: #fff; border-color: # 6D9700;
На цьому етапі вам може бути цікаво, яка різниця між розширюються і mixins є. Якщо ви використовуєте заповнювачі, вони поводяться як міксін без параметрів. Це вірно, але вихід у CSS відрізняється. Різниця в тому, що mixins дублюють правила час заповнювачі будуть переконатися, що ті ж правила поділяють селектори, що призводить до зменшення кількості CSS в кінці.
Операції
Тут важко протистояти каламбуру, але я тепер утримаюся від будь-яких медичних жартів. Оператори дозволяють вам робити математику у вашому CSS-коді і можуть бути дуже корисними. Приклад у довіднику Sass ідеально підходить для демонстрації цього:
.контейнер ширина: 100%; стаття float: left; ширина: 600px / 960px * 100%; в сторону float: right; ширина: 300px / 960px * 100%;
У наведеному вище прикладі створюється система сітки на базі 960px з мінімальними труднощами. Він буде чудово компілюватися до таких CSS:
.контейнер ширина: 100%; стаття float: left; ширина: 62,5%; в сторону float: right; ширина: 31,25%;
Один великий користування я знаходжу для операцій є фактично змішувати кольори. Якщо ви подивитеся на повідомлення про успіх Sass вище, не зрозуміло, що колір фону та кордону мають якісь відносини. Віднімаючи відтінок сірого, ми можемо затемнити колір, зробивши зв'язок видимим:
$ первинний: # 7EA800; .message-success @extend% button; фон: $ primary; колір: #fff; border-color: $ primary - # 111;
Чим світліше віднімається колір, тим темніше буде отриманий відтінок. Більш легкий доданий колір, легше отриманий відтінок.
Функції
Існує велика кількість функцій: функції чисел, функції рядків, функції списків, функції кольорів тощо. Погляньте на довгий список документації розробника. Я розгляну тут пару, щоб показати вам, як вони працюють.
The полегшити і темніють функцію можна використовувати для зміни світлості кольору. Це краще, ніж віднімання відтінків, це робить все ще більш модульним і очевидним. Погляньте на наш попередній приклад, використовуючи функцію затемнення.
$ первинний: # 7EA800; .message-success @extend% button; фон: $ primary; колір: #fff; border-color: darken ($ primary, 5);
Другим аргументом функції є відсоток необхідного затемнення. Всі функції мають параметри; подивіться на документацію, щоб побачити, що вони є! Нижче наведено кілька інших функцій кольору, які пояснюються: зневоднення, насичують, інвертувати, відтінки сірого.
The ceil Функція, як і в PHP, повертає число, округлене до наступного цілого числа. Це можна використовувати при обчисленні ширини стовпців або якщо ви не хочете використовувати багато десяткових знаків у кінцевому CSS.
.title font-size: ceil ($ title_size * 1.3314);
Огляд
Функції в Sass дають нам велику силу писати краще CSS з меншими зусиллями. Правильне використання mixins, extends, функцій і змінних зробить наші таблиці стилів більш ремонтовані, більш розбірливими і легше писати.
Якщо ви зацікавлені в іншому аналогічному препроцесорі CSS, я пропоную ознайомитися з LESS (або ознайомтеся з посібником для початківців) - основна принципова принципово однакова!
