воскресенье, 11 марта 2012 г.

LESS and SASS


Эти два языка являются надстройкой над CSS (происходит кросскомпиляция в CSS), пытаясь решить его часто возникающие проблемы и обойти различные ограничения, такие как:


  • Отсутствие переменных, что ведёт к частой копипасте шрифтов, размеров и т. д. и потребности всё это заменять через find & replace
  • Отсутствие вычисляемых значений
    Нельзя написать font-size: 18px + 2px;
  • Избыточность селекторов для вложенных элементов:
    nav { ... }
    nav ul { ... }
    nav ul li { ... }
    nav ul li a { ... }
    nav ul li a:hover { ... }
  • Повторение одних и тех же строк по всему коду:
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
Теперь разработчики могут применить свои навыки в структурировании и соблюдении принципа DRY в таблицах стилей. 

Оба языка поддерживают трансляцию как на стороне клиента, так и на стороне сервера. 

Языки позволяют:
  • Интуитивно разбивать большие файлы на модули через @import
  • Использовать переменные
  • Использовать примеси
  • Использовать вычисления: числовые, цветовые, строковую интерполяцию
  • Использовать вложенные правила, что сокращает запись, делает её более читабельной и не даёт связанным правилам расползаться по всему файлу
  • Управлять потоком выполнения (if, for ... )
LESS выглядит намного естественней после CSS, как натуральное продолжение. SASS же является более гибким и мощным, однако его вмешательство в стили очень существенно и режет глаза.

Хочу ещё рассказать о том, как хотел попробовать LESS в студии.

На стороне сервера для компиляции/кэширования/минификации есть отличный хэндлер dotless (NuGet). Однако студия никак не стимулирует писать less, так как нет ни подсветки, ни статической валидации. Я попробовал один из плагинов, самый рекомендуемый - Mindscape Web Workbench, но остался недоволен - подсветка мелькает после каждого введённого символа, а снизу висит баннер, который абсолютно ненавязчиво предлагает купить сиё творение. В топку.

Да, к сожалению студия, даже с невероятными потугами решарпера, существенно отстаёт от той же идеи в области web разработки. Печально, но факт.

Сайты: