Обяснени CSS препроцесори

CSS препроцесорите все повече се превръщат в опора в работния процес на уеб разработчиците от предния край. CSS е невероятно сложен и нюансиран език и в опит да улеснят използването му, разработчиците често се обръщат към използването на препроцесори като SASS или LESS.

CSS Preprocessors компилират кода, който е написан с помощта на специален компилатор. След това те използват това, за да създадат CSS файл, към който след това може да се направи препратка от основния HTML документ.

Когато използвате който и да е CSS препроцесор, ще можете да програмирате в нормален CSS точно както бихте направили, ако препроцесорът не беше на мястото си. Хубавото е, че имате и повече опции, достъпни за вас. Някои, като SASS, имат специфични стилови стандарти, които имат за цел да направят писането на документа още по-лесно, като например свободата да пропускате скоби, ако искате.

Разбира се, CSS Preprocessors предлагат и други функции. Много от предлаганите функции са невероятно подобни на препроцесорите, само с малки отклонения в синтаксиса. По този начин можете да изберете почти всеки, който пожелаете, и ще можете да постигнете същите неща. Някои от по-полезните функции са:

Променливи

Един от най-често използваните елементи във всеки език за програмиране е променливата, нещо, което CSS особено липсва. Като имате на разположение променливи, можете да дефинирате стойност веднъж и да използвате повторно, ако е в цялата програма. Пример за това в SASS би бил:

$yourcolor: #000056 .yourDiv { color: $yourcolor; }

Като декларирате SASS yourcolorпроменливата веднъж, вече е възможно да използвате повторно същия този цвят в целия документ, без никога да се налага да въвеждате отново дефиницията.

Цикли

Друг често срещан елемент в езиците са цикли, нещо друго липсва на CSS. Циклите могат да се използват за повтаряне на едни и същи инструкции няколко пъти, без да се налага да бъдат повторно въвеждани многократно. Пример за SASS би бил:

@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }

Този цикъл ни спестява да пишем един и същ код няколко пъти, за да променим размера на полето.

Ако / други изявления

Още една функция, която липсва на CSS, са операторите If / Else. Те ще изпълнят набор от инструкции само ако дадено условие е вярно. Пример за това в SASS би бил:

@if width(body) > 500px { background color: blue; } else { background color: white; }

Тук цветът на фона ще промени цвета в зависимост от ширината на тялото на страницата.

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

Повече информация:

  • Най-добрите уроци за CSS
  • SASS документи: //sass-lang.com/
  • SASS, препроцесор за вашите уеб гарнитури
  • ПО-МАЛКО документи: //lesscss.org/
  • Документи за стилус: //stylus-lang.com/