Что такое LESS/Sass и чем они могут быть полезными в разработке сайта

Вернуться
Опубликовано: 14.04.2015 г.

Сайты с каждым днем становятся все сложнее, графики, оформления и других элементов становится всё больше. CSS-файлы содержат уже тысячи строк кода, и это далеко не предел. Если писать всё это на чистом CSS, затраты времени и сил будут невероятными и неприемлемыми в любом серьёзном проекте. Поэтому и родились препроцессоры, которые позволяют писать упрощенный css-подобный код, который затем компилируется уже программой в чистый. Наиболее распространенные препроцессоры – это LESS и Sass. Что они дают разработчику, что у них общего и чем отличаются. Мы сегодня и поговорим.

Почему стоит использовать LESS/Sass

Если ответить коротко, так быстрее. Да, понадобится какое-то время на привыкание, изучение синтаксиса, однако это ничто по сравнению с тем, что вы выиграете при регулярной разработке. Например, такой кусок кода из препроцессора:

будет скомпилирован в обычный CSS:

Экономия видна невооруженным взглядом. А теперь представьте, сколько вы сэкономите на серьезном проекте. Кроме того, в препроцессорах реализовано то, что давно ждут в CSS, но никак не дождутся – переменные. Теперь нет необходимости десятки раз копировать один и тот же участок кода, достаточно раз запихнуть его в переменную и просто указывать ее, когда требуется.

LESS и его возможности

Самым распространенным препроцессором остается LESS. Благодаря удобству, регулярному обновлению и отличной документации, он стал неотъемлемой частью как малых, так и крупных проектов. Например, LESS используется во фреймворке Twitter Bootstrap. Он написан на JavaSctript. Разработчику он может предоставить переменные, mixins и различные динамичные функции. Он также наиболее подходит для новичков, так как его синтаксис максимально похож на чистый CSS.

Как это работает? Представьте, что вам нужно использовать один и тот же цвет в сотне элементов каскадной таблицы стилей. Не вопрос, можно для каждого элемента прописать что-то вроде color: #2d8e4b и радоваться жизни. А теперь представьте, что срочно нужно заменить цвет #2d8e4b на #4d7e6b. Даже если вы задействуете автоматическую замену, это займет немало времени и нервов. LESS же сводит на нет сложности такой операции. Достаточно задать в файле переменную, например, так:

@color-base: #2d8e4b;

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

Еще более любопытные возможности дают mixins, или примешивания. Они позволяют динамично добавлять свойства одних элементов другим. К примеру, у вас в коде есть класс .gradient с прописанными свойствами:

В LESS достаточно дописать имя класса к другому элементу:

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

Здесь экономия времени видна еще сильнее.

Интересно выглядят и математические действия, также доступные в препроцессоре LESS. Допустим, у нас есть два элемента, и нам нужно высоту одного из них сделать в два раза больше, чем другого. LESS позволяет отказаться от абсолютных значений и расчетов, всё будет выглядеть проще:

Оператор *, как известно, означает умножение, и при компиляции высота второго элемента будет 600 пикселей (300 умножить на 2). Если изменить значение переменной @height, автоматически пересчитаются и все зависящие от него значения.

Возможности и особенности Sass

Препроцессор Sass подойдет тем разработчикам, которые обладают определенным опытом. Это даже более мощный инструмент, чем LESS, но он менее интуитивен и требует больше времени на адаптацию. Его синтаксис еще больше упрощен – фигурные скобки не используются, вместо них вложенность регулируют отступы. Точка с запятой также не используется, вместо нее — перенос строки. Правда, в последнее время появился так называемый SCSS, который использует классический синтаксис CSS, но с добавлением возможностей препроцессора. Что касается возможностей, то они во многом повторяют LESS: есть mixins, переменные, математические операции и т.д. Синтаксис отличается, но общие принципы такие же.

Как видите, препроцессоры LESS и Sass могут очень сильно помочь в разработке, особенно крупных проектов, благодаря своим уникальным возможностям. Они серьёзно расширяют базовые свойства CSS и делают разработку простой, логичной и универсальной. Выделить какой-то один препроцессор сложно, они взаимозаменяемы и это дело вкуса.

1287 0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *