5 начина да подобрите Sass с бърбън
Ако пишете CSS често, възможно е вече да сте запознати със Sass. Sass е един от най-добрите начини за предварителна обработка на вашия CSS за чист, повтарящ се и поддържаем код. Силата на Sass е много значителна.
Но едно от основните предимства на Sass е разширяемостта - разработчиците на трети страни могат да създават добавки върху Sass, като допълнително увеличават възможностите му. Един от най-лесните и ефективни инструменти от този вид е бърбън.
Bourbon е библиотека от миксини, функции и допълнения към Sass, които разширяват неговата функционалност и правят работния процес на Sass по-удобен. Ако не сте запознати с Bourbon, написах ръководство за инсталиране стъпка по стъпка, за да започнете.
След като инсталирате Bourbon, ви насърчавам да изпробвате някои от любимите ми начини да улесните развитието на Sass с него.
1. Формати на шрифтове
С цялото днешно разнообразие от браузъри и формати на шрифтове е необходима доста голяма част от кода, за да се включи нов шрифт. Но възможностите на допълнителните шрифтове си заслужават, независимо дали става въпрос за ярък шрифт за заглавие или универсален шрифт за икони, който ви позволява да спестите трафик.
За да поддържате всички основни браузъри, трябва да създадете файлове с шрифтове във всички основни формати и след това да ги включите в CSS преди употреба. Браузърите са достатъчно интелигентни, за да разберат кой да използват, но за съвместимост между различни браузъри трябва да добавите всички опции. CSS за това изглежда така:
Сега можете да използвате този шрифт в заглавията си:
Bourbon има много удобен миксин, който ви позволява да добавяте нови шрифтове бързо и лесно. Ако сте последователни в наименуването на шрифтове и качването им в същата директория на сървъра, тогава Bourbonще генерира всички необходими CSS за вас от предишния пример:
Сега можете да използвате „My-Font“ навсякъде във вашите стилове и всички формати за всички браузъри ще бъдат на място.
Ако не искате да използвате "непробиваемия синтаксис" на @font-face, mixin има допълнителен аргумент $file-formats, който ви позволява да посочите желаните формати на шрифта.
Bourbon също има променливи за предварително дефинирани набори шрифтове, които се поддържат във всички браузъри. Това ще ви помогне да посочите шрифт с алтернативи, съвпадащи по сходство, в случай че не е наличен в други операционни системи.
Това са променливите:
Те генерират следните декларации за семейство шрифтове:
2. Полета за въвеждане във формуляри
Хлябът и маслото на уеб разработката е контролът върху външния вид на формулярите. Но добавянето на стилове, които работят последователно във всички елементи на формуляра, обикновено означава писане на по-сложни селектори.
Bourbon има набор от добавки, които улесняват създаването и управлението на еднакви стилове на форми. Горният CSS се генерира в Bourbon с един ред:
Изглежда, че има добавка за бутоните:
Това ще даде следните стилове:
Ако трябва да контролирате състоянията :active и :hover на елементите на формуляра, Bourbon може да се справи и с това. Просто добавете -active или -focus към добавките, които вече знаете, и ще генерирате код.
Ще генерира този CSS:
3. Преобразуване на единици
Едно от нещата, на които постоянно трябва да отделяте време, е конвертирането на размерите на пикселите на изображения и шрифтове в относителни единици като em или rem. Можете да правите изчисления всеки път, когато променяте стойности. Или можете да използвате удобните функции за преобразуване на Bourbon.
Нека започнем с просто преобразуване от пиксел към ем със стандартни настройкисъотношение 16px = 1em. Ето кода:
И неговият резултат:
Ако имате различен основен размер на шрифта, можете да го предадете като втори аргумент на същата функция em():
Ако вместо em използвате rem, за да използвате базовата стойност независимо от родителския елемент, тогава можете да използвате функцията rem():
Bourbon има няколко други алгоритъма за преобразуване, включително елегантната функция modular-scale(), която улеснява изчисляването на модулно мащабиране въз основа на хармонични интервали или утвърденото от времето златно сечение, което може да се използва при създаване на оформление или вертикален ритъм.
4. Поддръжка на Flexbox
Най-горещото ново нещо в света на CSS оформлението е flexbox, което ви позволява да дефинирате оформлението на елементите на екрана много по-лесно от старите методи, които изискват много допълнително маркиране и фантастични CSS правила. От 2009 г. Flexbox се промени няколко пъти и постепенно става все по-актуален.
Разбира се, за да го използвате в различни браузъри, трябва да добавите много префикси на доставчици и да предоставите резервни варианти. В зависимост от това колко браузъра възнамерявате да поддържате, използването на flexbox може да изисква писане на доста много CSS:
При вида на толкова много код, първоначалната радост от очакването на Flexbox се заменя с болка. Но ако наистина трябва да поддържате всички тези стари браузъри, Bourbon има способността да генерира цялото това количество код в няколко реда:
Вече споменах в бележката под линия към първата статия, че в Bourbon 5 (алфа версията е излязла в момента) всичко ще бъде ново. По-специално, всички миксини с префикси на доставчици ще бъдат премахнати - разработчицибиблиотеките препоръчват използването на Autoprefixer за това.
Bourbon има способността да поддържа голям набор от свойства на Flexbox. И когато Bourbon се актуализира, генерираният код ще се промени в зависимост от поддръжката на браузъра за Flexbox.
5. Изображения за Retina екрани
Сега трябва да сме подготвени за факта, че посетителите на сайта имат устройства не само с обикновени дисплеи, но и с дисплеи с висока разделителна способност и за разработчиците не е лесно да изберат правилното изображение, като вземат предвид максималното качество и минималния обем.
Един подход за решаване на този проблем използва медийни заявки за откриване на пикселното съотношение на устройството и предаване на фоновото изображение въз основа на дисплея. Работният CSS изглежда така:
Както можете да видите, тук има много излишък, особено ако стриктно спазвате еднаквост и последователност в именуването на файловете. Bourbon ви позволява да разрешите този проблем с един ред код:
Последният параметър не е задължителен, ако използвате PNG, който е форматът по подразбиране в Bourbon. Можете също така да персонализирате тази команда с допълнителни параметри, като например тип изображение за дисплеи на ретината, или като добавите суфикс.
Започнете днес
С цялата тази полезна функционалност и десетки функции с допълнителни функции, няма смисъл да пишете чист Sass без Bourbon, защото е като да пишете CSS без Sass. Просто опитайте, струва си!