Препроцессор CSS LESS. Изучаем LESS чтобы ускорить версктку сайта и веб-страниц.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов. Постепенно в рубрику верстка сайтов будут переноситься статьи из других разделов так или иначе связанных с версткой и, конечно, эти статьи будут корректироваться и редактироваться в процессе переноса, так как информации на моем сайте достаточно много на тему верстки, но подана информация не самым лучшим образом, как минимум, не систематизирована. И еще данная статья начинает раздел Препроцессор LESS, в котором мы подробно изучим все возможности препроцессора LESS, а возможно, попробуем сделать HTML шаблон с LESS.

Что такое LESS? Обзор CSS препроцессора LESS

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

Что такое CSS препроцессор LESS?

LESS – это препроцессор CSS, который очень сильно ускоряет оформление HTML страниц сайта при помощи таблицы стилей CSS. Препроцессор LESS – представляет собой язык (отчасти напоминающий язык программирования, но намного проще), который значительно расширит ваши возможности при написании CSS кода.

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

В этой рубрике я буду писать исключительно о препроцессоре LESS, поэтому рассчитываю, что вы уже умеете пользоваться браузерами, редакторами кода и можете самостоятельно создать HTML шаблон сайта и оформить его при помощи CSS. То есть подробно останавливаться на технических моментах, не связанных с препроцессором LESS я не буду, в рамках этих записей.

CSS препроцессор LESS разработан на языке JavaScript, поэтому файлы LESS можно использовать на сайте, компилятор будет отдавать браузеру переваренные в CSS файлы, а на самом деле на вашем сервере будет лежать файл с расширением .less.

Надеюсь, вы разобрались с тем, что такое препроцессор LESS и, думаю, что осознали его преимущества, если нет, то пойдем далее.

Как расширяет препроцессор LESS возможности CSS кодирования

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

Первое, что есть у препроцессора LESS и нет у CSS, точнее у CSS есть, но реализовано не так эффективно: вложенные правила. Вложенные правила LESS делают код более понятным и читабельным.

Вложенные директивы препроцессора LESS позволяют сократить написание CSS кода на треть, а иногда и больше, согласитесь, лучше написать 10 строчек, чем 15.

Математические операторы поддерживаются препроцессором LESS, что бывает очень удобно при верстки адаптивных макетов сайта.

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

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

В LESS есть пространства имен, которые используются для группировки правил, сгруппировав правила, вы можете их легко добавлять к другим элементам ваших страниц.

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

LESS поддерживает еще и комментарии.

В LESS есть расширения, вернее будет сказать наследование, это когда один элемент может наследовать стили другого элемента.

В препроцессоре LESS есть переменные, которые дают кучу возможностей по сокращению CSS кода.

В LESS есть миксины или примеси: мы просто стили одного элемента можем добавить (примешать, смешать) со стилями другого элемента, чтобы не дублировать код. Это похоже на наследование классов в ООП.

Если простых миксин в LESS мало, то LESS позволяет использовать параметрические миксины. Принцип их действия схож, но параметрические миксины могут, как и функции принимать один или несколько параметров, а сами параметры могут быть переменными.

Чего нет, того нет, в LESS нет операторов условия, но есть охранники. Guards в LESS чем-то похожи на языковую конструкцию if.

Циклы в LESS есть и их даже используют и, стоит сказать, что циклы в LESS могут значительно вам помочь при написании CSS кода.

В LESS есть слияние, которое используется для объединения двух разных правил CSS в одно.

В LESS очень много встроенных функций, о которых мы будем говорить и которые мы будем рассматривать подробно далее.

В CSS часто можно встретить селекторы, имена которых состоят из 5-6 слов, а есть селекторы с эквивалентными именами, но состоящие не из 5, а из трех или четырех слов, обычно такие селекторы пишутся для вложенных элементов, чтобы не писать имя класса из 5-6 слов препроцессор LESS реализует дочерние селекторы.

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

Преимущества и недостатки LESS

Давайте сперва поговорим о преимуществах, которые есть у LESS:

1. LESS файлы быстро компилируются в CSS, который понятен браузеру, при этом компиляция LESS происходит значительно быстрее, чем у других CSS препроцессоров.
2. За счет того, что у LESS есть вложенные правила, ваш код будет более читабельным и удобным для редактирования.
3. Изменения в шаблоны сайтов с LESS происходят быстрее, так как повторяющиеся значения можно присваивать переменным.
4. В LESS поддерживается наследование и повторное использование стилей одного класса в другом, что сокращает ваш код в разы.
5. Изучив LESS, вы сможете намного быстрее верстать HTML шаблоны, за счет того, что код будет в разы короче.
6. У LESS много других преимуществ и вы их поймете, когда его изучите.

А теперь давайте перечислим недостатки препроцессора LESS:

1. Изучать LESS стоит начинать только в том случае, когда вы довольно сносно знаете CSS, хотя изучение можно проводить параллельно.
2. Код LESS все-таки приходится тестировать после написания, даже у опытного разработчика LESS могут возникать кое-какие трудности.
3. Фрейморков, использующих LESS, меньше, чем фреймворков, использующих SASS.

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