Предимства на използването на препроцесор (Sass) в CSS разработката

„Програмен скрипт дигитален тапет“ от Maik Jonietz на Unsplash

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

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

  • Големи усилия за малки промени
  • Трудности при структурирането на кода
  • Излишък на код
  • Безкрайни редове от CSS класове и правила

Препроцесор ни помага да се справим с тези проблеми. Той има някои предимства пред обикновения CSS. Преди да се гмурнем по-дълбоко, първо обяснете какво е препроцесор на CSS ...

Какво е CSS Preprocessor?

Програма / инструмент със собствен синтаксис, който се компилира по-късно в стандартен CSS код.

Препроцесорът има собствен синтаксис за разработчиците да пишат по-лесен и чист CSS код. По-късно се превежда в отделен файл в стандартен CSS, защото браузърите не разбират синтаксиса.

Има различни препроцесори като Sass, Less и Stylus. В тази статия ще обясня някои предимства на Sass.

Какво е Sass?

Справка: официален уебсайт на Sass

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

FAQ: Sass срещу SCSS

Това е често задаван въпрос. Те всъщност са и двамата Sass с различен синтаксис. SCSS по същество е по-нова версия, Sass Версия 3.

Пример за синтаксиса на Sass:

$ цвят: сив
= Моя шрифт ($ цвят)
  семейство шрифтове: Arial, Helvetica, sans-serif
  размер на шрифта: 16px
  цвят: $ цвят
тяло
  фон: $ цвят
  марж: 0
  + Ми шрифт (бяло)

Пример за SCSS синтаксис:

$ цвят: сив;
@mixin my-font ($ color) {
  семейство шрифтове: Arial, Helvetica, sans-serif;
  размер на шрифта: 16px;
  цвят: $ цвят;
}
тяло {
  фон: $ цвят;
  марж: 0;
  @включете моя шрифт (бял);
}

Както виждаме, SCSS (Sassy CSS) има синтаксис, подобен на CSS, който е много по-лесен за четене. Това е разширение на CSS, докато Sass има по-различен синтаксис. Разширението им за файлове също е различно: .sass & .scss.

Можете да прочетете повече за това тук. Нека да продължим с функциите на Sass.

Функция №1: Променливи

Различните CSS класове могат да съдържат едно и също правило или правила в един проект. Например, на нашата уеб страница имаме 20 кутии с различни цветове на фона:

.box-1 {
   ширина: 100px;
   височина: 100px;
   фон: червен;
}
.box-2 {
   ширина: 100px;
   височина: 100px;
   фон: жълт;
}
...
.box-20 {
   ширина: 100px;
   височина: 100px;
   фон: син;
}

По-късно клиентът ни променя мнението си и иска по-големи кутии. Затова трябва да увеличавам характеристиките на ширина и височина на всеки клас един по един. Това също може да е 50 паралелки. В реалния живот това може да е разочароващо. Както споменах по-горе, това е пример за големи усилия за малки промени.

Как можем да го направим по-ефективно?

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

Определение на променлива:

$ променлива-име: стойност;

Връщайки се към горния пример, ако дефинираме променливи за ширина и височина:

$ ширина на кутията: 100px;
$ кутия-височина: 100px;

по-късно, когато е необходима промяна, трябва само да променим стойностите им веднъж:

$ ширина на кутията: 200px; // променен от 100px на 200px
$ височина на кутията: 200px; // това е всичко!
.box-1 {
   ширина: $ ширина на кутията; // използвайки променливи сега вместо пиксели
   височина: $ кутия-височина;
   фон: червен;
}
.box-2 {
   ширина: $ ширина на кутията;
   височина: $ кутия-височина;
   фон: жълт;
}
...
.box-20 {
   ширина: $ ширина на кутията;
   височина: $ кутия-височина;
   фон: син;
}

Самият CSS също поддържа променливи сега, но не работи в IE и стари версии на други браузъри:

https://caniuse.com/

Функция №2: Влагане

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

Например, нека да определим меню за навигация с връзки за кликване в HTML по-долу:

<Навигация>
  <Ул>
    
  • Начало
  •     
  • За
  •     
  • Контакт
  •   

    HTML поддържа вложен код. Въпреки това, без да влагате, те изглеждат така в CSS:

    CSS класове за навигационно меню

    Трябваше да напишем nav за всеки маркер, дори и за псевдокласа на котвата (задържане), защото nav е родителският маркер на всички. Sass обаче поддържа гнездене:

    Същите класове със Сас

    Тук можем да напишем по-добре структуриран код като в HTML. Не е необходимо да пишем nav клас след клас, което също предотвратява съкращението

    Важно: Не се препоръчва да се размножават класове по-дълбоки от 3 нива.

    Функция №3: Миксини

    Научихме по-горе как да използваме променливи за CSS правила. Но какво ще стане, ако трябва да използваме група правила заедно? Sass има функция, наречена mixins, което ни позволява да го правим.

    Какво е Mixin?

    Mixins са Sass функции, които групират CSS декларации заедно. Можем да ги използваме по-късно като променливи.

    Можем да създадем mixin с команда @ mixin, последвана от име:

    @mixin my-font {
      семейство шрифтове: Arial, Helvetica, sans-serif;
      размер на шрифта: 16px;
      стил на шрифта: курсив;
    }

    или можем да създадем mixin като функция и да добавим параметри също:

    $ font-color: червен;
    @mixin my-font ($ font-color) {
      семейство шрифтове: Arial, Helvetica, sans-serif;
      размер на шрифта: 16px;
      стил на шрифта: курсив;
      цвят: $ font-color;
    }

    След създаването на mixin можем да го използваме във всеки клас с команда @ include. Така че можем да използваме my-font mixin вместо 4 реда правила за шрифт всеки път. Този подход опростява кода.

    p {
      @включете моя шрифт;
    }
    Използването на миксини е добър начин за предотвратяване на излишък на код.

    Функция № 4: Импортиране

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

    Всъщност CSS също има функция за импортиране. Но работи по различен начин. CSS изпраща HTTP заявка до сървъра всеки път за импортиране на файл. Sass го прави без HTTP заявка, което е по-бърз подход.

    Всичко, което трябва, е да импортирате вашия Sass файл с команда @ import в друг файл Sass:

    // Вашият основен Sass файл
    @import 'файл';
    @import 'другFile';
    .class {
      // Вашият код
    }
    Не е нужно да използваме разширенията .scss във файла, Sass ще го разбере.

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

    Надявам се да намерите тази статия за полезна. Ако има нещо, което не разбирате, коментирайте въпросите си по-долу.

    Вижте профила ми за други статии:

    Благодаря ви много и до следващия път!

    Тази история е публикувана в най-голямото предприемаческо издание The Startup, последвано от +387 966 души.

    Абонирайте се, за да получавате нашите топ истории тук.