Вы здесь

LESS — язык динамических таблиц стилей

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

Немного о CSS

CSS расшифровывается как Cascading Style Sheets, что в переводе означает «таблицы каскадных стилей». Таблицы стилей позволяют отделить инструкции по визуальному представлению непосредственно от HTML-разметки. Благодаря этой революции мы попрощались со многими, многими строками HTML-разметки, которые размещались прямо в DOM-структуре и разметке таблиц... здорово!

CSS принёс много преимуществ. Например, до CSS код представления был:

  • Переплетён прямо с элементами страницы и содержанием... это грязно
  • Повторялся по нескольку раз на странице... это излишне
  • Реализовывался по-разному в пределах одного документа и сата... это противоречиво

Так кто же новый малыш?

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

Можно стать более лучшим темизатором в Друпале

Я занимаюсь разработкой фронт-энда и для меня важно то, что поможет мне улучшить работу с темизацией Друпала. LESS улучшил мой процесс темизации, позволив мне:

  • Создавать структуры CSS для многоразового использования, что ускорило написание кода
  • Создавать переменные, поэтому, когда я хочу изменить цвет, я изменяю переменную один раз и больше не нужно тратить в редакторе время на функцию «найти и заменить»
  • Создавать CSS для многоразового использования, на основе переменных. Например, можно написать CSS-код для закругления углов один раз, а затем использовать его с различными размерами по необходимости

Позвольте мне подробнее объяснить, почему я думаю, что LESS лучше CSS. Браузеры понимают CSS, поэтому, в конечном итоге вам нужен обычный .css-файл. Обычно, когда мы пишем .css-файл, то просто записываем длинный список правил показа, после чего пытаемся содержать его в порядке, группируя нужные правила «вместе», «по порядку», «логически».

Пример 1:

#main-menu {…}
#main-menu img {…}
#main-menu ul.menu {…}
#main-menu ul.menu li {…}
#main-menu ul.menu a {…}

Мысль... и ещё одна мысль под шляпой

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

Пример А:

Jon Smith […]
Jon Smith's address […]
Jon Smith's phone (h) […]
Jon Smith's phone (w) […]
Jon Smith's email […]

Но мы никогда не будем так делать! По крайней мере, я думаю, что не будем. Вместо этого, нам хочется использовать более простой и более организованный способ:

Пример Б:

Jon Smith
  address:
  phone
    (h):
    (m):
  email:

От LESS к CSS

Такая концепция вложенной иерархии является основой для написания LESS. Я могу написать вот такой код на LESS и он будет преобразован в код CSS как в примере 1.

Пример 2:

#main-menu {
  img { }
  ul.menu {
    li { }
    a { }   
  }
}

LESS более мощный

Это очень простой пример, чтобы продемонстрировать подход, который использует LESS. Если вам нужно написать несколько строк CSS-кода, то LESS вероятно не нужен. Но если вы работаете с CSS-файлом, который содержит сотни строк, с множеством вложенных слоёв и селекторов, то LESS это мощный и удобный способ написать такой код.

Бонус-пример (переменные)

Возможно, вы делаете проект, который содержит множество закруглённых углов. Вам нужно сделать небольшие изменения для каждого из таких элементов, поэтому вы переписываете свойства radius каждый раз. Перестаньте это делать, пишите на LESS! Объявите переменную как класс и используйте её снова, и снова, и снова.

Код LESS:

.round-my-corners(@radius: 10px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#normal_box {
.round-my-corners;
}
#small_box {
.round-my-corners(5px);
}
#large_box {
.round-my-corners(20px);
}

Сгенерированный на его основе код CSS:

#normal_box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#small_box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#large_box {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

Я <3 LESS

Вот несколько сайтов, которые позволят вам узнать о LESS больше: