Метка: less

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

Препроцессоры

Препроцессоры преобразуют код, автоматизируют рутинные операции, убирают дублирование стилей или селекторов, упрощают работу с CSS, позволяют ускорить разработку, на выходе получается кроссбраузерный css. 

Sass  (scss)

(на Ruby)

https://sass-scss.ru/guide/

Дополнительная библиотека Compass

Один из самых популярных препроцессоров

Less

( на JavaScript)

http://lesscss.org

https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/chapter_1/css-reprocessors.html

Stylus

( на JavaScript)

Наиболее гибкий и новый препроцессор

http://stylus-lang.com

Почему все чаще переходят на stylus: https://habrahabr.ru/company/yandex/blog/169415/

 

Отличия Sass и Less: https://habrahabr.ru/post/144309/

 

Что могут добавить в CSS надстройки Sass, Less  и прочие препроцессоры:

  • Переменные
  • Примеси
  • Вложенные селекторы
  • Функции
  • Простая математика
  • Циклы for
  • Массивы
  • Условные операторы if .. else
  • Наследование селекторов
  • Ссылки на свойства

 

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

Постпроцессоры берут готовый CSS и автоматизируют его: например, автоматическое добавление вендорных префиксов к новым свойствам CSS3, автоматизация CSS под оптимальную работу на большинствах современных браузеров.

Постпроцессор — это библиотека, которая преобразует CSS файл и на выходе сохраняет оптимизированный CSS.

Как работает постпроцессор: 

https://webformyself.com/postprocessory-css-dlya-nachinayushhix-sovety-i-resursy/

PostCSS.

(на JavaScript)

Автоматизирует рутинные операции с CSS с помощью расширений, написанных на языке JavaScript. Используется при разработке Википедии, Facebook и GitHub.

http://postcss.org

Подробнее о postCss: https://habrahabr.ru/post/280988/

Pleeease

(для NodeJS)

http://pleeease.io

Bless

Это постпроцессинг для оптимизации под IE

http://blesscss.com

Rework

Фреймворк для создания постпроцессоров

https://github.com/reworkcss/rework

 

Другие статьи: