Компиляция 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 — значит кросплатформенное) — есть компрессия выходного CSS
Клиентский вариант:

  • less.js — если в браузере отключены скрипты (а они отключены только у верстальщиков, которые смотрят, как выглядит сайт без скриптов, остальные 99,999% людей не отключают их) — то, к сожалению, браузер не получит скомпилированный файл, этот способ советуют сами разработчики LESS, принцип работы простой, в секции <head> подключаем наш LESS файл и после него подключаем скрипт для компиляции. Скрипт тут, качаем последнюю версию.  

    <link rel="stylesheet/less" type="text/css" href="styles.less">
     <script src="less-1.3.0.min.js" type="text/javascript"></script>
Серверный вариант: 
  • node.js — этим способом пользуется мой коллега, я сам вообще не разбираюсь в серверах, поэтому вот ссылка, которую загуглил:
  • rhino — про этот способ я ничего не знаю, но вот ссылка
  • lessphp — этим способом пользуюсь я. Качаем исходники с сайта. Пишем в секции <head> нашего шаблона следующие записи  
    <?php include('lessphpcomp.php'); ?>
     <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/styles.css">

    Первая строчка — подключает наш файл, который компилирует наш LESS в CSS, вторая строчка подключает скомпилированный CSS в шаблон.

    Сами файлы должны быть созданы нами, нашими руками. Вот пример файла lessphpcomp

    <?php
     require 'lessc.inc.php';
     $docroot = rtrim($_SERVER['DOCUMENT_ROOT'], '\\/');
     $less = new lessc($docroot.'/templates/mytemplate/less/styles.less');
     file_put_contents($docroot.'/templates/mytemplate/css/styles.css', $less->parse());

    Этот файлик делает следующее (построчно):

    1. с помощью less.inc.php (который мы скачали с официального и залили в корень шаблона) компилирует… далее стр.3
    2. создаем переменную докрут
    3. … компилирует наш LESS
    4. в CSS файл

    Который мы и подключили в шаблоне (сам этот файлик styles.css нам необходимо создать вручную и дать права 755).

    Теперь изменяем наш LESS файл — открываем сайт и видим изменения, прям как работать с обычным CSS файлом. 

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

    <?php //include('lessphpcomp.php'); ?>
  • +5
  • 0
  • 8
8 comments