5 способів покращити Sass за допомогою Bourbon
Якщо ви часто пишіть CSS, можливо, що ви вже знайомі з Sass. Sass це один з кращих способів препроцессингу вашого CSS для отримання чистого коду, що не повторюється і підтримується. Можливості Sass дуже значні.
Але одна з головних переваг Sass - це розширюваність - сторонні розробники можуть створювати надбудови над Sass, що ще більше збільшують його можливості. Одним з найлегших і найефективніших інструментів такого роду є Bourbon.
Bourbon це бібліотека міксинів, функцій та доповнень до Sass, що розширюють його функціонал і роблять більш зручним ваш робочий процес у Sass. Якщо ви не знайомі з Bourbon, я написав покрокову інструкцію щодо його встановлення, з вивчення якої ви можете почати.
Після встановлення Bourbon, я рекомендую вам спробувати деякі з моїх улюблених способів полегшення розробки Sass з його допомогою.
1. Формати шрифтів
З усією сучасною різноманітністю браузерів і форматів шрифтів, для підключення нового шрифту потрібен досить об'ємний фрагмент коду. Але можливості додаткових шрифтів стоять того, будь то яскравий шрифт для заголовка або універсальний шрифт іконки, що дозволяє вам заощадити трафік.
Для підтримки всіх основних браузерів вам потрібно створювати файли зі шрифтами у всіх основних форматах, а потім підключати їх до CSS до початку використання. Браузери досить кмітливі, щоб зрозуміти, який із них треба використовувати, але для кросбраузерності треба додавати всі варіанти. CSS для цього виглядає так:
Тепер ви можете використовувати цей шрифт у заголовках:
У Bourbon є дуже зручний міксин, що дозволяє додавати нові шрифти легко та швидко. Якщо ви послідовні в назві шрифтів і завантажуєте їх в один каталог на сервері, то Bourbonзгенерує за вас весь необхідний CSS з попереднього прикладу:
Тепер ви можете використовувати 'My-Font' будь-де у ваших стилях і всі формати для всіх браузерів будуть на місці.
Якщо ви не бажаєте використовувати “куленепробивний синтаксис” @font-face , у міксині є додатковий аргумент $file-formats , що дозволяє вказати потрібні формати шрифтів.
У Bourbon також є змінні для готових наборів шрифтів, які підтримуються у всіх браузерах. Це допоможе вам задавати шрифт із підібраними за схожістю альтернативами на випадок його відсутності в інших операційних системах.
Ось ці змінні:
Вони генерують такі декларації font-family:
2. Поля введення у формах
Хліб та олія веб-розробки це контроль над зовнішнім виглядом форм. Але додавання стилів, що одноманітно працюють у всіх елементах форми, зазвичай означає написання складніших селекторів.
У Bourbon є набір доповнень, що полегшують створення та керування єдиними стилями форм. Наведений вище CSS генерується в Bourbon одним рядком:
Схоже доповнення є і для кнопок:
Це дасть такі стилі:
Якщо вам потрібно контролювати стани :active і :hover елементів форми, Bourbon теж впорається з цим. Просто додайте -active або -focus до вже відомих додатків і ви згенеруєте код.
Згенерує такий CSS:
3. Перетворення одиниць
Одна з тих речей, на які постійно доводиться витрачати час, це конвертування піксельних розмірів зображень і шрифтів у відносні одиниці типу em або rem. Ви можете щоразу займатися розрахунками, коли у вас змінилися значення. А можете використовувати зручні функції Bourbon для конвертації.
Почнемо з простої конвертації пікселів у em у дефолтномуспіввідношенні 16px = 1em. Ось код:
І його результат:
Якщо у вас інший базовий розмір шрифту, ви можете передати його як другий аргумент у ту саму функцію em() :
Якщо замість em ви використовуєте rem, щоб використовувати базове значення незалежно від батьківського елемента, ви можете використовувати функцію rem() :
У Bourbon є ще кілька алгоритмів конвертації, включаючи витончену функцію modular-scale() , що спрощує розрахунок модульного масштабування на основі гармонійних інтервалів або перевіреного століттями золотого перерізу, що можна використовувати для створення розкладки або вертикального ритму.
4. Підтримка Flexbox
Найактуальніша новинка у світі CSS-розкладки – це flexbox, що дозволяє вам визначати розташування елементів на екрані набагато простіше, ніж при використанні старих методів, що вимагають великої кількості додаткової розмітки та наворочених правил CSS. Flexbox починаючи з 2009 року неодноразово видозмінювався і поступово стає все більш актуальним.
Звичайно, для використання в різних браузерах вам потрібно додати багато вендорних префіксів і передбачити запасні варіанти. Залежно від того, як багато браузерів ви збираєтеся підтримувати, використання флексбоксу може вимагати написання досить об'ємних CSS:
Побачивши таку кількість коду, початкова радість від передчуття Flexbox змінюється болем. Але якщо вам дійсно потрібно підтримувати всі ці старі браузери, у Bourbon є можливість генерувати всі ці обсяги коду кількома рядками:
Я вже згадував у примітці до першої статті, що у Bourbon 5 (на даний момент вийшла альфа версія) все буде по-новому. Зокрема всі міксини з вендорними префіксами будуть видалені — розробникибібліотеки рекомендують використовувати для цього Autoprefixer.
Bourbon має можливість підтримки великого набору властивостей Flexbox. І при оновленні Bourbon код, що генерується, буде змінюватися в залежності від підтримки Flexbox в браузерах.
5. Зображення для екранів Retina
Зараз треба бути готовими до того, що у відвідувачів сайту зустрічаються пристрої не тільки зі звичайними дисплеями, але й з дисплеями підвищеної чіткості та розробникам нелегко вибрати потрібне зображення з урахуванням максимальної якості та мінімального обсягу.
Один із підходів вирішення цієї проблеми використовує медіа-запити для виявлення співвідношення пікселів пристрою та передачі фонового зображення в залежності від виду дисплея. CSS, що працює, виглядає так:
Як бачите, тут багато надмірності, особливо, якщо ви чітко дотримуєтеся одноманітність і системність при іменуванні файлів. Bourbon дозволяє вирішувати це завдання одним рядком коду:
Останній параметр не є обов'язковим, якщо ви використовуєте PNG — у Bourbon це формат за замовчуванням. Ви також можете кастомізувати цю команду додатковими параметрами, типу зображення для дисплеїв з ретину або додавши суфікс.
Починайте сьогодні
З усією цією корисною функціональністю та дюжинами функцій з додатковими можливостями немає сенсу писати чистий Sass без Bourbon адже це як писати CSS без Sass. Просто спробуйте, він вартий того!