CSS препроцесорите

guide
CSS препроцесорите са ключови в уеб разработките и са задължителен инструмент при работата ни със CSS. Препроцесорите разширяват CSS с много възможности, които липсват в спецификациите на езика – променливи, оператори, интерполации, функции, комбинации и много други. Препроцесорите SASS, LESS и Stylus са добре познати.

Защо предварителна обработка на CSS?

CSS е примитивен и непълен език. Изграждането на функция, повторното използване на дефиниция или наследяване са трудни за постигане. За по-големи проекти или сложни системи поддръжката се явява много голям проблем. От друга страна, уеб се развива, нови спецификации се въвеждат и в HTML както и в CSS. Браузърите имплементират тези спецификации //, докато са в състояние на предложението със специалните си префикси на доставчици. // В някои случаи (както при фоновия градиент) кодирането със специфични свойства на доставчика се превръща в тежест. Трябва да добавите всички различни версии на доставчици за един резултат. За да се пише по-добър CSS, има различни подходи, като разделяне на дефинициите на по-малки файлове и импортирането им в един основен файл. Този подход помага да се справим с компонентите, но не решава повторенията на кода и проблемите с поддръжката. Друг подход беше ранното внедряване на обектно ориентиран CSS. В този случай, прилагаме две или повече дефиниции на клас към даден елемент. Всеки клас добавя един тип стил към елемента. Наличието на множество класове увеличава повторната използваемост, но утежнява поддръжката. Препроцесорите с техните разширени функции, значително помагат да се постигне писане на многократно използваем, поддържаем и разширяем код в CSS. Използвайки препроцесор, можете лесно да увеличите производителността си и да намалите количеството код, който пишете в проектите си.

Характеристиките на препроцесорите

Както при всеки език за програмиране,  препроцесорите също си имат свой собствен и различен синтаксис. Всички те поддържат класическо CSS кодиране и синтаксиса на класически CSS. SASS и Stylus имат допълнителни стилове. В SASS можете да пропуснете писането на къдрави скоби и точка и запетая, докато в Stylus можете да пропуснете дори и двоеточие. Това обаче не е задължително – нито в SASS, нито в Stylus. В примерите по-долу можете да намерите версии SASS, LESS и Stylus и CSS изходи. Те са само примерни употреби за техните характеристики. За по-подробни примери посетете страниците с документация на всеки препроцесор.

Променливи

Променливите бяха функция, която винаги беше желана да се реализира в CSS. Всеки разработчик искаше да дефинира основен цвят и да го използва в целия CSS файл, вместо да трябва всеки път да записва шестнадесетичния или именувания цвят в свойство. Също както за “цвят“, бяха необходими променливи и за „ширина“, „размер на шрифта“, „семейство шрифтове“, „рамки“ и т.н. Променливите в SASS започват със знак $, в знак LESS @ и без префикс в Stylus. И в SASS, и в LESS стойностите се присвояват с двоеточие (:) и със знак за равенство (=) в Stylus.

Nesting / Влагане (гнездене)

При CSS липсва визуална йерархия по време на работа с дъщерни селектори. Трябва да пишем селекторите и техните комбинации в отделни редове и блокове. Влагането осигурява визуална йерархия по същият начин както е и в HTML и значително увеличава четливостта. В някои случаи влагането причинява прекалено големи размери на селекторите и нещо като „селекторна композиция“, така че го използвайте разумно.

Mixins / Миксини

Миксините са блок набор от дефиниции, който се компилира според някои параметри или статични правила. С тях можете лесно да пишете градиенти на фона за различните браузъри или CSS стрелки и други.

Extends / Удължавания

Удълженията са полезни за споделяне на обща дефиниция със селектори, вместо да я копирате на различните необходими места. Всички разширени селектори са групирани в компилиран CSS. SASS разширява всеки екземпляр на разширен селектор, който включва неговите дъщерни селектори и наследени свойства. Въпреки това, в LESS можете да изберете всеки екземпляр на разширен селектор, като добавите атрибут „all“ за разширяване на метода или можете да изберете само основния екземпляр. Удълженията също са и верижно ориентирани.

Операции с цветове

И трите препроцесора имат цветни функции за работа с цветове. Можете да изсветлите основния цвят или да го наситите, дори можете да смесите два или повече различни цвята. Тази функция не е много важна, но е полезна и приятна за използване.

If/Else изявления

Контролните директиви и изрази спомагат за изграждането на подобни дефиниции на стилове според съответстващи условия или променливи. SASS и Stylus поддържат нормални условия If/Else. Но в LESS, можете да постигнете това с CSS Guards.

Loops / Цикли

Циклите са полезни при итерация през масив или създаване на поредица от стилове, като при ширините на даден грид. Подобно на случая с if / else, LESS използва CSS Guards и рекурсивни миксини за имплементацията на цикли.

Математически операции

Математическите операции могат да се използват за стандартни аритметични или единични преобразувания. SASS и Stylus поддържат аритметика между различни единици. В допълнение към простата математика, предварителните процесори имат и сложна математическа поддръжка като таван, закръгляване, получаване на минимална или максимална стойност в списък и т.н.

Imports / Внос

Вместо да използвате един голям файл, разделянето на вашите кодове на малки части е полезно за изразяване на вашите декларации и увеличаване на поддръжката и контрола върху кодовата база. Можете да групирате подобни парчета код в подобни папки и да ги импортирате в основния css файл. Също с оператора за импортиране, рамки могат да се добавят и към работни пакети.