❤️ CSS препроцесори: Less & Sass – какво са и как да ги използваме

Писането на стилове за уеб сайт си е вид изкуство. Докато използваме различни методи за стилизиране и манипулиране на DOM дървото и HTML елементите, е важно да поддържаме един стил на писане и да сме консистентни, за да избегнем бъдещи проблеми в layout-a на сайта.

В този урок ще ти разкажа какво представляват CSS препроцесорите и ще ти покажа как да ги използваш, за да създаваш максимално ефективен и лесен за поддръжка код ?

Какво представляват CSS препроцесорите?

Преди да се впуснем в спецификите на Sass и Less, е важно да разберем концепцията на CSS препроцесорите и каква е тяхната природа.

Тези инструменти разширяват способностите на стандартния CSS чрез функционалности като променливи (variables), функции (functions) и т.нар. mixins (не се тревожи ако това понятие не ти говори нищо, след малко ще го разгледаме подробно) и др.

Тези „подобрения“ улесняват процесът по създаване и поддръжка на стилове, правейки кодът ни по-организиран и ефективен.

Защо да използваме CSS препроцесори?

CSS препроцесорите предлагат множество благинки и могат значително да подобрят (и забързат) процесът по разработване на даден софтуерен продукт.

В примерът по-долу можеш да видиш какво имам предвид:

.header-large {
   font-family:Tahoma;
   font-weight:bold;
   font-size:48px;
   color:#ff0000;
}

$mainFont: Tahoma;
$mainColor: #ff0000;

.header-large {
   font-family: $mainFont;
   font-weight: bold;
   font-size: 48px;
   color: $mainColor;
}

Както можеш да видиш, използването на променливи чрез препроцесор като Sass или Less ни дава възможността да централизираме стойност и да я прилагаме глобално в целия проект.

Казано с по-прости думи: представи си, че работиш по front-end на даден проект и си почти на финалната права, когато проджект мениджъра идва и казва, че клиентът е променил идентичността на своята марка, а с това и всички цветове. Представи си ако трябва да се увериш, че във всички файлове цветовата стойност (например от #f2f2f2 на #ff0000 за сиво…) е обновена и кореспондира с последните промени… е да, възможно е, но защо е нужно?

И за да се върна на примера – ако бяхме използвали препроцесор и бяхме съхранили всички стойности на цветове в променливи, то обновяването им щеше да бъде пренебрежително леко усилие.

Sass и Less

Sass е абревиатура от „Syntactically Awesome Style Sheets,“ и съвсем отговаря на името си. Идва в два синтактични варианта – SCSS (Sassy CSS) и Sass. SCSS напообява синтаксиса на класическия CSS, правръщайки го в предпочитан избор заради плавния преход. Sass от друга страна възприема доста по-отдаден и индивидуален синтаксис.

Less, или „Leaner Style Sheets“ се характеризира с много прост синтаксис и интуитивна права на изучаване. Оказва се предпочитан избор сред начинаещите разработчици не само заради това, но и заради лесната инсталация.

Инсталация и екосистема

За да започнеш да използваш Sass или Less, първата стъпка е тяхната инсталация. Настройките за този процес са различни за всеки от двата препроцесора. Нека ги видим:

Sass: инсталирането на Sass изисква Ruby да бъде предварително инсталиран, след което препроцесорът се инсталира чрез команди в терминала (конзолата). Това добавя допълнителен слой на зависимост и доста често е препятствие, особено за начинаещи разработчици. Може също да се интегрира с други езици като JavaScript, PHP и Python чрез libSass.

Less: от друга страна, Less инсталацията е сравнително по-лесна, разчитайки на NodeJS и няколко команди отново в терминала:

npm install -g less
> lessc styles.less styles.css

Функции

Функциите са сред основните компоненти на препроцесорите, макар да се наблюдават значителни разлики в двата препроцесора.

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

Less: предоставя основни функции и определено отстъпва на Sass по отношение на огромното разнообразие. Това потенциално може да повлияе на възможността да се пишат по-сложни сценарии за стилизиране.

@function fibonacci($n) {
  $sequence: 0 1;
  @for $_ from 1 through $n {
    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
    $sequence: append($sequence, $new);
  }
  @return nth($sequence, length($sequence));
}

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

div {
  background: @bg; 
  color: if(@bg-light, black, white);
}

Променливи и миксини

И Sass, и Less въвеждат концепцията за променливи и миксини в CSS, което ни позволява да пишем по-чист и по-ефективен код. Тези функции подобряват повторното използване на кода и улесняват управлението на сложни стилове.

Променливи

Спомняш си примера с промяната на идентичността на марката от по-горе, нали? Е, в случая щяхме да използваме променливи, в които да запазим HEX стойностите на използваните цветове. И това щеше да се случи чрез променливи.

В Less декларираме променливите със символа @, докато в Sass го правим с $.

$main-color: #007bff;

.button {
  background-color: $primary-color;
}

@main-color: #007bff;

.button {
  background-color: @primary-color;
}

Миксини (Mixins)

Миксините са друга много мощна функционалност, която препроцесорите ни предлагат. Какво представляват? На прост език – парченце код, комбинация от стилове, които можем да повикваме и прилагаме за множество елементи.

Sass ни предлага създаването на миксини с параментри, което от своя страна ни дава възможност да създаваме максимално приложими стилове за по-комплексни сценарии, докато Less отново предлага по-прост, но и по-лесен за асимилиране подход.

Нека ти покажа пример на миксини в двата препроцесора:

.button {
  @include rounded-corners(5px);
}

@mixin rounded-corners($radius) {
  border-radius: $radius;
}

.button {
  .rounded-corners(5px);
}

.rounded-corners(@radius) {
  border-radius: @radius;
}

И в двата случая ще имаме бутон със заоблени крайща по 5px от всяка страна.

Sass срещу Less

А сега нека разгледаме предимствата на Sass срещу тези на Less

Вместо заключение

Когато трябва да избираме CSS препроцесор и по-конкретно: Sass или Less, всичко се свежда до това какъв е tech stack-a на проекта (и компанията) и с кой от двата препроцесора сме по-добре запознати. За тези от нас, които искат по-комплексни функционалности и по-голям набор от възможности за писане на сложни, но ефективни сценарии за стилизиране, може би Sass ще е по-доброто решение. Но за онези от нас, които търсят простотата и елегантността на препроцесор, който има множество от възможности, но все пак не е необходимо да си wizard – Less е по-удачният избор.

Ако тепърва започваш да използваш препроцесори, то ти препоръчвам да го направиш с Less, за да усвоиш основните концепции и правила с по-лесен за разбиране и използване CSS препроцесор 🙂

Stay blond 😉

Включи се в интензивния workshop, по време на който ще създадем интерактивен уеб сайт по подаден във Figma диза