Компиляция 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, в который добавили динамики.

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

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

Для чего это?

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