Первые шаги в LESS - примешивания

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

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

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

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

Скругленные блоки на LESS/CSS

html:

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

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

Первые шаги в LESS - переменные

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

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

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

Первые шаги в LESS - вложенные правила

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

Код 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 в CSS

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

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

styles.css = styles.less

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

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

    Ссылки:

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

Использование LESS

Добрый день.

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

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

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

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

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

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

Для чего это?

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