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

Добрый день.

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

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

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

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

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

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

Для чего это?

  • Самый простой пример — вы указали цвет ссылки, и при наведении хотите сделать ее темнее. Вместо того, чтобы открывать какие-нибудь графические программы для подбора цвета, вам нужно в свойстве наведенной ссылки написать, что она должна быть темнее.
    Пример:
    @link: #08c; /* Создаем переменную цвета ссылки */
    a {color: @link;} /* Указываем, что цвет ссылки = переменной @link  */
    a:hover {darken(@link, 20%);} /* Указываем, что цвет наведенной ссылки = переменная @link на 20% темнее */

Для чего нужны переменные?

  • Примером выше, я показал, что можно создать переменную, потом, при верстке сайта, эту переменную можно использовать, например в оформлении рамки блока:
    .linkborder {border: 1px solid @link;}  /* Указываем, что цвет рамки = переменная @link */
    и если вы почему-то решили ссылки сделать в зеленых тонах (а заодно и обводку), то вам нужно всего-лишь сменить 1 запись — переменную:
    @link: #08c; = @link: #6e7;

А что значит «смешать свойства»?

  • Это когда вы захотите сделать еще один блок с рамкой и сделать его фон тоже зеленый (в примере выше мы сменили цвет), но светлее:
    .linkborderback {.linkborder; background-color: lighten(@link, 40%);} /* Указываем, что тут мы берем все свойства и значения из селектора .linkborder и добавляем цвет фона = переменная @link на 40% светлее */

Не — ну это понятно, а вообще к чему это все, мне нетрудно и руками все поменять?

  • Мне тоже нетрудно, но при использовании LESS при переделках сайтов я экономлю ведро нервов и тележку времени.

А я вообще не слышал, чтобы этот самый LESS кто-то использует.

  • Ну я обычно в таких случаях ссылаюсь на известный фреймворк — Бутстрап. Они его используют.

Не — я скачал бутстрап — там CSS.

  • Это для всех — CSS, для особо избранных там на сайте есть ссылка — extend — кликните.

А как браузер LESS — то как воспримет?

  • Для этого я создам отдельный топик, но на скорую руку сразу скажу — по обычному, т.к. браузеру мы будем давать не LESS, а уже скомпилированный CSS (как выше упомянул — об этом будет отдельный топик).
6 comments
Допиши, что на сервере должен быть установлен копмпилятор.
Не обязательно. Можно компилировать LESS в CSS на локале. Об этом следующая статья.
В лбом случеае стоит указать, что для компилирования на стороне сервера требуется надстройка.
Вообще про LEss очень интересно с удовольствием еще в дороге пока был прочитал эту статью.  Про компилятор да есть такой косяк… но с другой стороны при разработке это действительно может экономить кучу времени… Вопрос компилятор не будет страдать избыточностью кода??
Про избыточность кода — нет. Я например использовал на днях локальный компилятор — он мало того скомпилировал, дык еще и скомпрессировал файл. Удалил переводы строк и пробелы. А вот компилятор на PHP что я описал в топике следущем — тот между фигурной скобкой и свойством вставляет пробел, между свойством и значением — удаляет. Свойства не склеивает в одну строку, но ничего страшного. 
спасибо за подробную структурированную информацию!
Only registered users can comment.