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

За всеки случай ще направя кратко разграничаване между препроцесорите и постпроцесорите.

Какво e CSS препроцесор?

Sass, Less и Stylus са 3 от най-популярните препроцесора и по своята същност представляват комбинации от инструменти които, от една страна засилват значително скоростта при писане на css, от друга улесняват промените и поддръжката на кода, от трета могат да направят кода много по-подреден и четим ако се използват правилно. С други думи това са езици, на които се пише css, но без лимитациите на css.

Ако скоро сте решили да понаучите и използвате някой от тях – Sass е правилният.

The Sass way

Какво е CSS постпроцесор?

Постпроцесорът прилага промени върху вече създадения от препроцесора и компилирания от компилатора css код, с цел оптимизация му за продукция – изтриване на коментари и празни пространства, обфускиране, браузърна поддръжка и тн…

Какво е Pleeease

All the annoying CSS stuff we don’t want to do in 1 tool

Pleeease е инструментът, който оптимизира изходният css код като:

  • добавя префикси, базирани на Autoprefixr
  • fallback за rem стойности
  • добавя opacity филтър за IE8
  • сглобява всички media-queries в едно правило
  • минифицира крайния файл
  • генерира sourcemap от пре към постпроцесори
  • прилага SVG fallback на css3 филтри (blur, grayscale)
  • поправя псевдоелементи изписани с две двуеточия като ги изписва с едно за IE8

Инсталиране на Pleeease

Pleeease е Node.js базиран и се инсталира лесно. Ако сте инсталирали и работили с препроцесор логиката на работа с Pleeease е много сходна.

Ако нямата инсталиран Node.js, трябва да си го свалите и инсталирате. След което отваряте един терминал и пишете

Ако използвате Gulp или Grunt може лесно да добавите Pleeese към средата си за разработване.

Употреба на Pleeease

Също както при препроцесорите трябва през терминала да стигнете до директорията на съответният проект в който ще правите шашмите.

След като сте вече в папката със стиловете, за да получите изходния файл напишете

Pleeease не модифицира файловете, които вече имате по никакъв начин. По подразбиране това което ще получите след тази команда е нов файл с име app.min.css, който би трябвало да съдържа всичко нужно извлечено от css файловете. За да заработи всичко е достатъчно да включите само него към проекта без никакви други css файлове.

Конфигурация на Pleeease

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

Ако искате Pleeease да пресъздава app.min.css (или файлът , който сте описали в конфигурацията) всеки път когато има промяна в текущите css файлове напишете стандартното.

Така Pleeease ще следи за промяна в css файловете, и все път когато има такава ще презаписва изходния файл. Ако направите промяна в конфигурационния файл, трябва да рестартирате watch командата, за да се захапят промените.

Експериментален Pleeease.NEXT

Pleeease.NEXT отива по-далече във възможностите за постпроцес-ване на css код, но е доста експериментална идея, а оттам и рискова – лично аз бих го ползвал само с експериментална цел.

Коментари през Facebook

3 Comments
  • Stoyan
    June 28, 2015

    Или имаш пропуски или документацията която ползваш е стара като примери.

    • ph1x
      June 28, 2015

      Благодаря ти за коментара!
      Най-вероятно е едно от трите. Документацията, която използвах е предимно от please.io.
      Би ли бил малко по-конкретен?

      • Стоян
        June 29, 2015

        Ами примера им в страницата дори е различен. Трябва ти cli версията за да я използваш без външен модул като Гълп да речем, а още повече че аз не можах да подкарам на cli конфига който е просто един js на версия по нова от 2.0.0. Така че мисля че тяхната документация е не вярна или поне не е валиден за юникс лайк ОС каквито са Мак и Линукс.

Leave a Reply to ph1x Cancel reply

Your email address will not be published. Required fields are marked *