Доброе время суток.

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

Для примера я решил использовать CSS свойство border-radius и показать вам, как я (а в скором времени и вы) экономлю время.

Вот такие блоки я хочу увидеть в итоге:

html:

<div class="divOne"></div>
 <div class="divTwo"></div>
 <div class="divThree"></div>
 <div class="divFour"></div> 

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

Я в предыдущем топике хотел рассказать про примешивания, но еще рано, т.к. сперва я должен рассказать вам про переменные, а уже следующий топик будет про примешивания.

По своей сути переменные в LESS это ничто иное, как обычные константы. Но да шут (фиг и т.д.) с ними. Решил создатель леса сказать что это переменные — будут переменные, но мы то знаем, что это константы. По опыту работы все эти константы действительно становятся раз в месяц переменными, т.к. редко какой сайт мы сделали и забыли и постоянно вносим правки.

Переменные нам нужны для того, чтобы определить их в одном месте, а затем использовать их в любом другом месте нашего стиля.
Например, создав переменную @green: #0a3; Мы можем потом использовать эту переменную в значениях таких свойств, как цвет текста, цвет фона, рамки, градиента и еще чего-нибудь.
Все, кто слушает мои

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

Код CSS

#header {background: #333;}
 #header h1 {font-size: 36px;}
 #header p {font-size: 24px;}
 #header p a {color: #fff;}
 #header p a:hover {color: yellow;}

Код LESS

#header {background: #333;
   h1 {font-size: 36px;}
   p {font-size: 24px;
     a {color: #fff;
       &:hover {color: yellow;}
     }
   }
 }

Объясню теперь подробнее. Хотя по коду уже должно быть все понятно.

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

Где здесь удобство:

Итак, в предыдущем топике я слегка описал, что такое LESS, а сейчас я расскажу вам как начать использовать LESS вместо CSS.

Первое что мы сделаем, это переименуем наш css файл в less

styles.css = styles.less

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

• Специальной программой (компилятором) компилируем LESS в CSS. После этого вставляем готовый файл на сайт.
  минус — надо сначала писать — потом компилировать — заливать и проверять на рабочем сайте
  Но иногда именно локально и требуется. Я попробовал три приложения, 1,3 и 4 и оставил 4… но это уже на ваш личный выбор.

  Ссылки:

  • LESS.app (для Mac OS)
  • WinLESS (для Windows)
  • LESS parser (для Adobe AIR — значит кросплатформенное)
  • Crunch (для Adobe AIR — значит кросплатформенное) — есть компрессия

Я использую при верстке шаблонов для Joomla не CSS, а LESS. Кто знаком с этим динамическим языком стилевой разметки (динамическим CSS), можете пропустить данный топик и сразу написать комментарий, остальным советую обратить внимание на текст ниже. Я планирую написать так сказать «цикл» статей по данной тематике, надеюсь у меня хватит сил, терпения, времени и т.д.

Есть всякие официальные текстовки (en ru) но я расскажу все по своему.

Что такое LESS и чем он отличается от CSS?

• LESS это тот-же самый CSS, в который добавили динамики.

Что за динамика?

• Это когда вы можете сделать какое-либо условие, смешать свойства, пользоваться переменными.

Для чего это?

• Самый простой пример — вы указали цвет ссылки, и при наведении хотите сделать ее темнее. Вместо того, чтобы открывать какие-нибудь графические программы для подбора цвета, вам нужно в свойстве