Компиляция Less


Содержание

Работаем с less в Sublime Text. Компилируем less исходники Bootstrap

Less — это препроцессор для CSS стилей. В двух словах — это CSS который можно программировать. Если вы не используете препроцессоры, то рекомендую ознакомиться и начать использовать.

Самый простой способ начать компилировать less код в css в Sublime Text — это установить плагин Less Build. Главное чтобы в пути к компилируемому файлу не было русских символов, и работать он будет хорошо. Для новичков этого вполне хватит. Еще можно установить плагин BuildOnSave, чтобы билдить не сокращением Ctrl+B, а нажимать привычное Ctrl+S, и билд будет происходить по сохранению файла.

Но вот я решил скомпилировать less исходники Twitter Bootstrap, и не тут то было. Консоль Build Results начала выдавать множество ошибок, в самых разных файлах. Все дело в том что в less были обновлены правила синтаксиса, причем достаточно давно, но эти новшества в плагинах для Sublime Text видимо не были внедрены. Поэтому необходимо изменить способ сборки less файлов. Прошу не пугаться, займет это не более 5 минут.

Компилируем less исходники bootstrap в Sublime Text

1. Добавляем подсветку синтаксиса less в SublimeText

Открываем SublimeText, запускаем package control — install package. Как установить менеджер расширений package control читаем здесь. Устанавливаем плагин less — Syntax highlighting. Теперь у нас есть подсветка less кода.

2. Устанавливаем less компилятор

Сначала необходимо скачать и установить Node.js и NPM (Node Package Manager — входит в состав node.js). После этого запускаем консоль, если у вас нет консоли — скачиваем консоль ConEmu для Windows, устанавливаем и запускаем консоль. В консоли вводим команду для установки компилятора less:

3. Устан авливаем Less build плагин в Sublime Text

Запускаем Package Conrol → Install Package и устанавливаем плагин Less2Css

4. Компилируем less

Создаем две папки в проекте less и css. В less — кладем less исходники Bootstrap, открываем файл bootstrap.less и компилируем.Css — оставляем пустой, в нее будет сохранен скомпилированны css из less исходника.

Если возникла ошибка: Unable to interpret argument clean-css … заходим в консоль и пишем:

Автоматическая компиляция css в PhpStorm

Сейчас активно используются три типа метаязыков : SCSS, SASS (что. в общем-то, является улучшенным SСSS) и LESS. Для того, чтобы работать с ними, не задумываясь о процессе компиляции в css нужно выполнить два шага:

  1. Установить компилятор
  2. Настроить PhpStorm

Так же, здесь есть и свои проблемы, но о них позже.

Установка компилятора

В интернете достаточно мануалов по установке компиляторов. Не буду заострять на них внимание, лишь кину пару ссылок на материалы по установке:

Настройка PhpStorm

Каждому нравится свой подход и свои настройки. В одно и тоже время PhpStorm для одного будет божественно настроенный, для другого — неприятный редактор. Я опишу один из способов настройки, которым пользуюсь сам.
Настраивая компилятор в PhpStorm’е, я преследовал цель безмятежной разработки тем и модулей в Drupal’е, а именно: при такой структуре каталогов

что составляет 99% всех модулей и тем мне было важно работать с файлом *.less, а компилятор автоматически компилировал все в папку css.
Итак, настройки PhpStorm.

Создаем новый watcher

UPD. 18.05.2020:
Обновленное окно в версии PhpStorm 2020.1.2 для Linux выглядит так

  • На этом этапе заполняем все поля как на скриншоте. Строки для заполнения:
    1. Arguments: —no-color $FileName$
    2. Working directory: $FileDir$
    3. Output path to refresh: ../css/$FileNameWithoutExtension$.css

    P.S. В аргументы можно добавить ключ -x для минимизации css файла. Теперь минификатор вынесен в отдельный плагин — http://lesscss.org/usage/#v2-upgrade-gu >

  • Пробуем

    • Открываем любой модуль и создаем папку any-module/less
    • Создаем там файл test.less
      После создания less-файла появится появится файл стилей any-module/css/test.css
      Появился? Значит вы все делаете правильно, а если нет, значит сегодня не ваш день.

    Открываем (less), редактируем, сохраняем.
    Пример,

    В момент сохранения вы уже должны видеть такую картину

    Открываем any-module/css/test.css, видим:

    Нюансы

    1. Если мы создаем файл less для того, чтобы подключить его через @import, то будет создан аналогичный файл css.
      Решения
      • сначала прописывать @import «несуществующий-файл», а потом его создавать, при этом PhpStorm ругнётся, что вы подключаете несуществующий файл.
      • создать файл less, подключить его и удалить соответствующий файл css.

    Относится к п.1. Если мы создаем файл, который планируем подключить где-то внутри структуры каталогов, то соответствующий файл, будет создан не там где ожидается.

    Так происходит потому, что мы указали: Output path to refresh: ../css/$FileNameWithoutExtension$.css
    Решение: нет решения — смиритесь.

    Изучаем LESS: Общее описание системы

    Теперь, когда мы закончили рассмотрение SASS, давайте поговорим о LESS. Если вы еще не читали мою статью по SASS, вы можете найти ее здесь.

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

    Мы также говорили о том, как реализовать SASS с помощью переменных, вложенных элементов, примесей, функций и так далее.

    Так что, теперь мы готовы приступить к изучению еще одного метода предварительной обработки — LESS.

    LESS в двух словах

    LESS — это язык динамических таблиц стилей, который расширяет CSS и, также как и SASS, характеризуется динамическим поведением, примером чего могут служить переменные, примеси, операции и функции.

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

    LESS работает и на стороне клиента ( IE , Firefox и т.д.), и на стороне сервера, используя Node.js . В этой статье мы рассмотрим клиентскую сторону. Так что, просто сядьте как можно удобнее, расслабьтесь и наслаждайтесь уроком.

    Что вам понадобится для выполнения заданий данного урока:

    • LESS библиотека ;
    • SimpLESS для Mac/Windows (компилятор на стороне клиента);
    • Текстовый редактор;
    • Время и терпение.

    Установка SimpleLESS

    В качестве LESS компилятора на стороне клиента я буду использовать SimpleLESS , потому что он прост в использовании, и это бесплатное приложение. Так что, перейдите по ссылке , скачайте и запустите его.

    При первом запуске SimpleLESS вы увидите что-то вроде изображения приведенного ниже. Пожалуйста, обратите внимание — если в верхней строке вы не видите текущую версию, это означает, что приложение не работает должным образом.

    В этом случае вам необходимо скачать его заново.

    Подготовка разметки и LESS Javascript

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

    Далее внутри папки LESS создайте HTML-файл, назовите его index.html , скопируйте и вставьте в него приведенный ниже код.

    Обратите внимание, что мы включили библиотеку LESS ниже таблицы стилей:

    Heading 1

    Heading 2

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    Затем создайте новый файл и назовите его style.less . Чтобы вы могли увидеть, как компилируется LESS, давайте добавим в этот файл несколько примеров кодов LESS. Идем дальше.

    Скопируйте и вставьте следующий код в файл style.less :

    На данный момент у вас должна получиться структура файла наподобие этой:

    Компиляция LESS помощью SimpLESS

    Для компиляции LESS файла в CSS, запустите приложение SimpLESS и перетащите папку « LESS », которую мы создали раньше, в окно приложения:

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

    Обратите внимание, что в окне приложения будет выведена текстовая информация, которая уведомляет вас о том, был ли файл скомпилирован или нет.

    В моем примере, как вы можете видеть в правом углу текст гласит « never compile ». Это означает, что наша папка LESS никогда не компилировалась:

    Приложение также предлагает нам на выбор различные функции, а именно: Prefix , Minify , Love . Вы можете видеть их в правом углу окна под оповещением о статусе.

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

    Давайте рассмотрим их использование:

    • Prefix — позволяет обеспечить совместимость с различными браузерами с помощью префиксов;
    • Minify — сжимает ваш CSS документ, с помощью встроенного CSS-минификатора;
    • Love — функция комментирует или извещает о состоянии SimpLESS для вашего документа.

    Теперь давайте скомпилируем наш файл LESS в CSS. Для этого нужно просто нажать на иконку « Обновить » в левом углу окна приложения SimpLESS :

    Если процесс компиляции был выполнен успешно, вы увидите сообщение об успешном завершении в правом углу приложения.

    Пожалуйста, обратите внимание, что пока приложение запущено, оно будет отслеживать все обновления, которые вы совершаете для файлов в папке LESS:

    Так что, когда вы откроете папку LESS, вы увидите, что в нее был добавлен файл CSS.

    Убедитесь, что вы привязали скомпилированный файл CSS ( style.css ) к файлу index.html , чтобы добавились стили, которые вы задали через LESS:

    Переменные LESS

    Как и SASS, LESS также использует переменные. Если вы до этого занимались составлением кода, вы знаете, насколько использование переменных упрощает любой процесс.

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

    Для определения переменной LESS использует знак @. Давайте посмотрим на практике, как это работает.

    Откройте файл LESS и вставьте в него следующий код. Для этого кода я создал 3 переменные для цвета, размера шрифта и рамки.

    Я добавил переменные myColor и myFontSize в тэг H1, переменную myBorder я добавил в список идентификаторов myList :

    Теперь, если вы откроете файл style.css , вы увидите, что код был обновлен. Идем дальше, запускаем этот код через адресную строку браузера.

    Вы увидите что-то похожее на то, что приведено на рисунке ниже:

    Примеси LESS

    Иногда нам нужно создать стили, которые могут повторяться по всей таблице стилей. В этом нам могут помочь примеси.

    Так же, как и SASS, LESS поддерживает возможность добавлять каждый элемент неоднократно, но без необходимости использовать директиву @include . Вместо этого, ему достаточно всего лишь одной простой директивы класса стилей.

    Чтобы понять, как в LESS работают примеси, давайте рассмотрим следующий код:

    Как вы можете видеть, я создал примесь, которая называется sample-mixin , и добавил ее в тег H1 и параграф с >myParagraph .

    Если вы запустите документ в браузере, результат будет подобен тому, что показано на рисунке ниже:

    Вложенные правила LESS

    В LESS аналогично SASS применяются вложенные правила для идентификаторов и классов. Это позволяет поддерживать чистоту и организацию кода.

    Чтобы показать их работу на практике, я создал пример CSS-кода и соответствующий ему вариант LESS.

    Вариант CSS

    Вариант LESS

    Как видите, мы организовали наши стили с помощью LESS, и нам не пришлось повторять идентификатор container несколько раз.

    Если вы запустите приведенные выше коды в браузере, то увидите аналогичные результаты.

    Операторы LESS

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

    Давайте рассмотрим, как это работает:

    Как вы видите, к базовому значению рамки в 5 пикселей я добавил еще 5 пикселей, а затем задал ее цвет. Базовый отступ в 90 пикселей я разделил на 3, и в результате получил отступ в 30 пикселей.

    Если вы запустите этот код в браузере, то увидите следующий результат:

    Функции LESS

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

    Ниже приводится список функций цвета LESS:

    • darken (цвет, значение);
    • lighten (цвет, значение);
    • saturate (цвет, значение);
    • desaturate (цвет, значение);
    • alpha (цвет)

    Давайте попробуем поработать с некоторыми из этих функций. Откройте файл style.less и скопируйте в него следующие коды:

    Как видите, цвет фона был затемнен на 60%, а затем цвет текста тегов H1 и H2 стал светлее на 10%, а цвет текста тегов абзаца стал светлее на 20%.

    Когда вы запустите данный код в браузере, то получите результат аналогичный, тому, что приведен на рисунке ниже:

    Заключительное слово

    Библиотека LESS предлагает для дизайнеров и разработчиков много фантастических возможностей. В этой статье представлено только общее описание системы.

    Вы можете поэкспериментировать с представленными в статье кодами, после чего я хотел бы услышать о том, что у вас получилось, и увидеть результаты ваших экспериментов.

    Всегда приветствуются пожелания, замечания и советы. Надеюсь, вам понравился этот урок, увидимся в следующий раз.

    Данная публикация представляет собой перевод статьи « Сайтостроение от А до Я » , подготовленной дружной командой проекта Интернет-технологии.ру

    Less. Авто-компиляция файла less в css, ubuntu 16.04

    Как сделать авто-компиляцию файла less в css, чтобы каждый раз не вводить в терминале команду? Ubuntu 16.04, sublime text 3

    2 ответа 2

    — Установите node.js — создайте папку в вашем проекте tools, перейдите в новую папку. — введите npm install gulp (в консоле, находясь в нужной папке)

    вы получите файл package.json

    куда пропишите примерно следующее:

    создайте файл gulpfile.js

    туда поместите примерно следующее:

    введите в консоли npm install

    после установки, введите gulp в консоле, после чего будут автоматически собираться лесс файлы в css.

    В примере используются дополнительные тулзы для минификации и ренейма файлов. + плюс есть таск перекладывающий и могущий минифицировать js файлы. Настройте пути, чутка прочитайте про gulp, и я думаю у вас все получится.

    теперь gulp следит за лесс файлами и если вы внесли изменения — все будет перекомпилироваться автоматом. в случае с больши лесс файлами, на компиляцию может уходить более 5 секунд(css более полумегабайта), учитываете это, иногда вводит в замешательство. В некоторых случаях имеет смыл перезапустить gulp.

    LESS-компиляция через Node.js и Grunt

    Смысл этой затеи в том, чтобы автоматизировать компиляцию less-файлов. Работать должно так: сохранили любой less-файл, сам запускается компилятор и на выходе получается готовый css-файл. Сейчас я расскажу про вариант, который может использоваться любым вебмастером, но самое главное, что он универсальный и подходит и для других целей, например компиляция SCSS.

    Перед началом, давайте определимся с основными понятиями.

    Всё будет работать на Node.js. Node.js — это интерпретатор JavaScript. То есть исходные/исполняемые файлы для Ноды — это js-файлы. По большому счёту, нам вообще всё-равно как там что работает. Для нас главное — установить Node.js на свой компьютер. Делается это очень просто — загружается msi-файл с официального сайта и устанавливаем как обычную windows-программу.

    Сразу отдельное замечание о том, как обновлять Node.js. В теории он может обновить себя сам. На практике же, проще скачать новую версию и её установить. Тогда никаких проблем не возникает.

    В комплекте Node.js есть т.н. пакетный менеджер npm. Он позволяет устанавливать, удалять, обновлять и т.п. модули Node.js. Модули или пакеты — это что-то вроде программ, ради которых всё это безобразие и затевалось. Например Grunt — это модуль для автоматизации различных задач.

    Работать с Node.js придется командной строкой через консоль. Стандартная консоль Windows — вещь не для слабонервных, поэтому я рекомендую поставить альтернативную. Сам я пользуюсь conemu. Консоль годится не только для Node.js, но и для кучи других задач. Для удобства conemu можно добавить в панель Total Commander.

    Проверить работу Node.js можно выполнив команду

    — которая выводит свою версию.

    Для less-компиляции нужно установить модуль less. Делается это командой:

    Эта команда выполняет установку (install) модуля «less». Ключ «-g» указывает выполнить установку глобально. Если не указывать этот ключ, то установка модуля будет осуществляться только в текущий каталог. Таким образом делается установка любого другого модуля. Node.js сам скачивает через Интернет нужные файлы.

    У модуля могут быть свои плагины. Например у «less» есть плагин сжатия css «less-plugin-clean-css». Устанавливается он точно также:

    После такой установки в консоли будет доступна команда lessc, которой и выполняется ручная компиляция less-файлов.

    Модули могут использовать другие модули (пакеты). Причём каких-то определенных версий. Человеческий мозг не в состоянии охватить всё это великолепие взаимодействие, поэтому все эти зависимости прописываются в самих модулях разработчиками. Отсюда получается, что устанавливая какой-то модуль, будет автоматом установлен еще один, там еще и т.д. В итоге модулей может оказаться довольно прилично. Я об этом специально упоминаю, потому что требуемый модуль может весить 2МБ, а подтянет за собой ещё 20МБ.

    Сложность ещё в том, что все требуемые модули располагаются в каталоге проекта. Ну например, less-компиляция. Если у нас 10 шаблонов, то придется настроить все 10 проектов в каждом каталоге шаблона. То есть к 200КБ less-файлов придется таскать по 20МБ node-файлов.

    Как обхитрить это недоразумение, я расскажу ниже, пока же рассмотрим еще одну особенность работы с Node.js.

    Для того, чтобы управлять пакетами в проекте (проект — по сути это просто рабочий каталог), используется специальный файл package.json. В нём задаются настройки проекта, включая и используемые модули. То есть перед тем, как запустить Node.js для проекта, нужно создать package.json. Вот пример файла, который мы будем использовать для Grunt:

    Секция devDependencies как раз и указывает какие модули будет использовать проект.

    Инсталяция/инициализация проекта выполняется командой:

    После этого Node.js немного пошурстит и в результате появится каталог node_modules. Этот каталог (и package.json) можно просто копировать между одинаковыми проектами без инсталяций.

    Теперь поговорим о Grunt.

    Grunt используется для автоматизации самых разных задач. Там гиганское количество плагинов и я предлагаю просто пробежаться глазами, чтобы оценить всю мощь этого инструмента. Нас будут интересовать grunt-contrib-less, который выполняет задачу less-компиляции и grunt-contrib-watch, который отслеживает каталоги на изменения и запускает нужные задачи (в нашем случае less).

    Установить Grunt можно такими командами:

    Настраивать Grunt в проекте нужно через файл Gruntfile.js. Для основы возьмем такой вариант:

    В секции watch в параметре files указывается маска (можно явно файл) для less-файлов в каталоге less. Все пути указываются относительно каталога проекта.

    В секции less задаются непосредственно параметры компиляции. Здесь указан исходный и конечный файлы: less/main.less скомпилируется в css/main.css.

    После этого запускаем Grunt командой:

    Если не было ошибок, то появится что-то вроде этого

    Теперь изменим less/main.less и увидим сообщение

    То есть любые изменения в less, автоматом приводят к компиляции css-файла. Чтобы остановить отслеживание, нажмите Ctrl+C .

    Когда у вас 1-2 проекта, то в принципе можно на node_modules не обращать особого внимания. Но, когда проектов десятки, да ещё и в разных местах, то это уже проблема. Чтобы обойти это безобразие я придумал небольшую хитрость. Дело в том, что Grunt позволяет одновременно отслеживать несколько каталогов и не обязательно в каталоге проекта.

    Таким образом можно создать проект где-то совершенно отдельно (вообще пофиг где), а в задачи Grunt добавить пути к нужным нам less-каталогам (например шалоны MaxSite CMS). Делается это в Gruntfile.js так (показываю только изменные строчки):

    — то есть здесь просто перечисляются каталоги и файлы с полными путями на диске. Если нужно добавить новый проект, то достаточно добавить две его строчки и заново запустить Grunt.

    В conemu, кстати, есть пункт меню «Hide to TSA», который сворачивает консоль в иконку «к часикам» и не маячит на панели задач. Довольно удобно получается.

    Программа Koala — легкая компиляция Sass, Less и CoffeeScript

    Программа Koala — легкая компиляция Sass, Less и CoffeeScript

    Здравствуйте! Сегодня я начинаю цикл статей о препроцессорах CSS. И начать я хотел бы с обзора программы Koala, которая помагает компилировать код с LESS или SASS на CSS.

    Koala — это кроссплатформенная программа для компиляции Less, Sass, Compass и CoffeeScript. Работает на Win, Mac OS и Linux.

    Программа бесплатна и живет на благотворительные пожертвования. Впрочем, когда я попытался перевести ребятам на Paypal немного денег пару лет назад, сделать этого не получилось. Разработчики находятся в Китае, а Paypal там работает только на отправку денег. Тем не менее, программа от этого хуже не стала. Разберемся подробнее.

    Преимущества

    • Поддержка нескольких языков: Koala работает с Less, Sass (*.scss), CoffeeScript и фреймворком Compass. Кроме того, она может компилировать и обыкновенные CSS и JS, не связанные с препроцессорами.
    • Компиляция в реальном времени: Koala отслеживает изменения файлов и автоматически компилирует их. Все действия происходят в фоновом режиме и не требуют вмешательства разработчика.
    • Настройка компиляции: Можно указывать разные компиляторы для каждого выбранного файла. Впрочем, это вам вряд ли понадобится.
    • Компрессия: Koala умеет автоматически сжимать код после компиляции. Эту функцию по желанию можно не использовать.
    • Сообщения об ошибках: Если программа встретила ошибку в коде при компиляции, она покажет уведомление. Если ошибок нет, просто будет пересоздан результирующий файл.
    • Кроссплатформенность: Koala работает на Windows, Mac и Linux.

    Интерфейс

    Основное окно программы содержит все активные проекты (слева) и основные элементы управления. Как видите, интерфейс минималистичен, разобраться в нем можно за пару минут.

    Основные элементы управления всегда на виду. Вот для чего они нужны:

    При переключении типов файлов из общего списка останутся только файлы выбранного типа.

    Настройки SASS и LESS

    В настройках есть приятные вещи. Возьмем вкладку с настройками Sass:

    В два клика Koala начнет сохранять ваши Sass-файлы в CSS, никаких дополнительных плагинов устанавливать для Sass не потребуется.

    Koala умеет автоматически добавлять кроссбраузерные префиксы для css-свойств, сохранять комментарии. В типе файла CSS я всегда рекомендую выбирать compressed, так его вес будет минимальным, а для удобства разработки оставлять включенными Source maps.

    Автопрефиксы — это автоматическое добавление префиксов для поддержки свойств CSS3 в браузерах устаревших версий.

    Например, для скругления углов в 3 пикселя вам будет достаточно написать:

    …а после работы автопрефикса получите:

    Кроме того, настройки для каждого типа файлов доступны в панели справа. Для этого выберите файл в списке и в правой части откроются настройки для файлов этого типа.

    Настройки JavaScript и CoffeeScript

    Для JS есть всего две настройки:

    1. Compress — всегда включайте, чтобы полученный js-файл сжимался.
    2. Preserve copyright comments

    Для CoffeeScript в 99% случаев вы оставите настройки по умолчанию, поэтому останавливаться на них нет смысла.

    Где скачать

    Скачивайте программу с официального сайта разработчиков — koala-app.com. Там есть отдельные ссылки для Linux, Mac, Ubuntu.

    В итоге

    В итоге я могу назвать Koala самым простым и правильным решением для разработчика, кому не нужны сложные настройки и функции. Если вам для работы нужен графический интерфейс, компиляция только Sass/Less/CSS и нежелание копаться в командной строке, тогда Koala — ваш выбор.

    Koala хорошо подходит для начинающих разработчиков или тех, кто делает небольшой проект и не хочет разворачивать полную версию Gulp или Grunt.js.

    Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

    Изучаем LESS: Применение на практике

    Дата публикации: 2020-01-19

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

    План статей серии:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Применение на практике

    Написание кода LESS

    Если вы читали наше Введение, то знаете, что я рекомендую компилировать все файлы LESS локально, просто используя одну таблицу стилей CSS. Самые популярные программы, используемые для этого — это LESS.app и CodeKit, обе создал Incident57.

    LESS.APP

    LESS.app – это бесплатное приложение, которое обнаруживает все файлы LESS в веб-папке и компилирует их в CSS. Вы можете задать конкретные папки вывода и выбрать, какие именно LESS-файлы вы хотите скомпилировать (это пригодится, если вы разделили LESS на меньшие модульные файлы и импортировали их в одну таблицу стилей). Кроме этого, можно минимизировать CSS из этого приложения, сохраняя изначальный размер файла (но даже не думайте редактировать CSS файл).

    CODEKIT

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    CodeKit – это новое поколение приложения LESS.app, которое стоит $20 (чтобы помочь создателю выплатить кредит на обучение, так что, на самом деле, не так уж и плохо). CodeKit компилирует LESS идеально, но это еще не все. Он также компилирует файлы Sass, Stylus, Haml, Coffeescript, JavaScript и Compass. Пусть я и немного знаю об этих других типах файлов (не считая JavaScript), но… CodeKit может скомпилировать их все! Мало того, у CodeKit есть еще одно преимущество – когда пользователь сохраняет код, его браузер автоматически обновляется и отображает изменения, и все это сопровождается прикольной CSS3 анимацией.

    Проекты LESS

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

    BOOTSTRAP от TWITTER

    Bootstrap от Twitter – это на данный момент один из самых популярных проектов с открытым кодом, он разработан Mарком Oттo и Джейкобом из Twitter. Bootstrap – это набор HTML, CSS и JavaScript компонентов для пользовательского интерфейса и взаимодействий, включая адаптивный дизайн и такие компоненты как кнопки, формы и другое.

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

    Адаптивная тема WORDPRESS BONES

    Если вы хотите заниматься веб-дизайном и разработкой для WordPress, я бы предложил начать с темы Bones. Существует много шаблонов WordPress для начинающих, но я думаю, вряд ли найдется что-то лучше, чем Bones от Эдди Мачадо.

    Адаптивная версия Bones использует LESS, чтобы структурировать сайт WordPress посредством медиа-запросов CSS3 и определить, какой файл LESS нужно загружать в компилятор. Система довольно удобная, и если вы собираетесь работать с WordPress, то она определенно достойна внимания.

    Проект 320 AND UP

    320 and Up – это адаптивный шаблон в стиле «малые экраны – прежде всего». Этот проект является идеальной отправной точкой для тех, кто хочет создавать адаптивные веб-сайты, не интегрируя их с CMS. Если вы собираетесь импортировать веб-сайт на другую CMS, например, в ExpressionEngine, 320 and Up – это как раз для вас. Этот проект использует LESS для того, чтобы создать адаптивный фреймворк для стилизации начиная с малых экранов и заканчивая большими — в отличие от концепции «веб-дизайн для стационарного компьютера в первую очередь, а для экранов меньше в следующую очередь». Проект очень интересный и определенно заслуживает внимания!

    Заключение

    Этой публикацией мы завершаем серию статей «Изучаем LESS». Спасибо за ваше внимание, комментарии и обсуждения. Вы знаете другие проекты, которые используют LESS? Напишите о них в комментариях ниже.

    Автор: Alex Ball

    Редакция: Команда webformyself.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Препроцессоры. Быстрый старт

    Овладейте азами работы с препроцессорами с нуля

    Введение в LESS

    Что такое LESS?

    LESS — это динамический метаязык на основе каскадных таблиц стилей (англ. Cascading Style Sheets — CSS), предназначенный для упрощения, масштабирования и поддержки большого объёма CSS кода.

    LESS был создан Alexis Sellier под влиянием более раннего метаязыка стилей SASS (Syntactically Awesome Stylesheets). Одной из особенностью LESS является то, что он может работать как на клиентской стороне, так и на стороне сервера. Язык стилей LESS это продукт с открытым исходным кодом, который строится на языке программирования JavaScript.

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

    Подключение LESS

    В этой статье мы с Вами рассмотрим два варианта работы с LESS, если быть точнее, то с файлами *.less . Первый вариант предусматривает использование файлов *.less напрямую в браузере пользователя с подключением необходимого скрипта JavaScript для компиляции на «лету».

    Второй вариант предусматривает использование специального препроцессора, который будет компилировать файлы *.less в файлы каскадных таблиц стилей — *.css .

    Начнем с первого варианта:

    По аналогии с каскадными таблицами стилей вам необходимо подключить файл *.less к Вашему HTML документу с использованием тега :

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

    Обратите внимание, что необходимо подключать файл со скриптом уже после того как вы подключили файл *.less . Этого достаточно, чтобы начать описывать стили с помощью метаязыка LESS, при этом как вы понимаете компиляция из LESS в CSS будет происходить на стороне браузера (на «лету»).

    Давайте перейдем к рассмотрению примера в котором начнем использовать LESS:

    В этом примере мы создали отдельный файл 2.less в котором указали следующие стили:

    Кроме того, мы подключили к документу скрипт JavaScript, который выступает в роли компилятора и преобразует метаязык LESS в каскадные таблицы стилей CSS.

    Результат преобразования будет следующий:

    Как вы можете заметить результат компиляции (преобразования) практически идентичен первоначальным стилям, за исключением того, что RGB значение цвета было конвертировано в шестнадцатеричную систему HEX, что не влияет на внешний вид, но незначительно сокращает количество символов для описания этого стиля.

    Результат нашего примера * :

    Рис.2 Пример подключения less файла к документу.

    * — Если вы решили повторить этот пример локально на своем компьютере и не увидели результат примера, показанный на изображении выше, то скорее всего вы сможете найти в консоли браузера подобную ошибку: «Failed to load file:///***/2.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https . Мы с Вами не будем вникать в локальные политики разных браузеров, отключать их и запускать браузеры с определенными ключами, просто попробуйте воспользоваться браузером Firefox для этого примера, или переходите к дальнейшему чтению.

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

    Рассмотренный выше метод работы с файлами less имеет право на существование, но не является рекомендованым к использованию, по той причине, что производительность и скорость отображения стилей документа при этом подходе снижается. В настоящее время существует большое количество инструментов для компилиции LESS в CSS, начиная от компиляции на стороне сервера, заканчивая отдельными программными продуктами, один из которых мы сейчас с Вами рассмотрим.

    Препроцессор Koala

    Задача этого учебника заключается в быстром освоении метаязыка LESS, именно по этой причине, на начальном этапе, я предлагаю Вам для компиляции использовать программный продукт Koala.

    Этот программный продукт позволит нам не тратить время на настройку среды, которая будет отслеживать изменение *.less файлов и компиляцию их в *.css файлы, что идеально для первичного знакомства с метаязыком LESS не отвлекаясь на технические особенности по настройке той, или иной среды.

    Для начала нам необходимо перейти на официальный сайт продукта и скачать его последнюю версию и установить на свой компьютер.

    После этого необходимо создать файл *.less и подключить в программе Koala папку в которой находится этот файл (нажмите на +), например, в моем случае папка less:

    Рис.3 Пример подключения папки с файлом less.

    Вы должны увидеть в окне программы файл, который вы создали заранее. Кликните под название файла, как показано на изображение ниже, это позволит Вам выбрать путь куда будут компилироваться CSS файлы.

    Рис.4 Выбор пути для компиляции CSS файлов.

    Я выбрал ту же папку в которой находится less файл, в результате у вас должно получиться следующее:

    Рис.5 Установка каталога для компиляции CSS.

    Теперь программа Koala будет отслеживать все изменения в less файле и при их изменении сразу будет проводить их компиляцию в css . После первой компиляции вы увидите в главном окне файл css , кликнув под который, при необходимости вы сможете по аналогии настроить путь в который будут сохраняться файлы css , но уже минифицированные (стили без пробелов в одну строку). Как правило, такие стили используются на «боевых» (готовых) проектах. Рис.6 Настройка компиляции минифицированной версии CSS файла.

    Не забудьте поставить галочку возле Auto Compile в случае необходимости компиляции минифицированной версии css файлов «на лету».

    Комментарии в LESS

    По аналогии с CSS допускается использовать внутри *.less файла как однострочные, так и многострочные комментарии со следующим синтаксисом:

    Будьте готовы к тому, что в зависимости от настроек компилятора, комментарии могут не сохраняться при компиляции из файлов *.less в *.css . Например, вышерассмотренный компилятор Koala удаляет однострочные комментарии при компиляции, это поведение по умолчанию доступно изменить в его настройках.

    Компилятор LESS/SASS/SCSS в css файлы

    Технические данные

    Описание

    С чем может быть связана очень долгая работа компилятора? До этого использовал версию 1.0.3, работало отлично, на другом проекте установил последнюю версию и стало очень долго компилить при изменении файла. Попробовал залить на новый проект компонент с прошлого проекта, это не помогло, так же долго компилит, а потом еще выдает сверху страницы Line 195 WARN: на такую констуркцию в файле миксинов, но после обновления страницы этот варнинг исчезает.

    @else if $ > @media only screen and (max-width: 400px) < @content; >
    >
    @else <
    @warn «Breakpoint mixin supports: w1300, w1200, w1000, w800, w650, w550, w450, w400»;
    >

    Максим Зверев, не знаком с compass.

    Судя по хабру: «Compass нечто большее чем CSS препроцессор, разработчики Compass позиционируют его как дизайнерский фреймворк. Compass использует SASS синтаксис (.sass или .scss), так что любой SASS код будет скомпилирован и в Compass.». Если ваш компилятор поддерживает его, то будет работать. Из коробочных: скорее всего нет поддержки (не проверял).

    Расширение возможностей Bootstrap

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

    • Использование LESS
    • Компиляция Bootstrap
    • Статический ресурс

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

    Bootstrap был изначально разработан с использованием LESS. LESS — это динамический язык стилевой разметки, созданный нашим хорошим другом Алексисом Селлиером (Alexis Sellier). Это позволило сделать разработку CSS более быстрой, простой и веселой.

    Почему LESS?

    Один из создателей Bootstrap опубликовал об этом короткий пост в своем блоге. Вот его основные мысли:

    • Bootstrap компилируется c LESS в 6 раз быстрее, чем с Sass
    • Less написан на JavaScript, что намного проще, в сравнении с Ruby, написанном на Sass.
    • Less — это нечто большее; мы хотим чувствовать, что сами пишем CSS и настраиваем в Bootstrap абсолютно все возможности.

    Что включено?

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

    Узнайте больше

    Посетите официальный сайт http://lesscss.org, чтобы узнать больше.

    Компиляция Bootstrap с использованием Less

    Поскольку наш CSS написан с использованием Less и применяет переменные и смешивания, его нужно компилировать для достижения конечного результата. Далее объясняется, как это сделать.

    Способы компиляции

    Node и makefile

    Установите LESS-компилятор и uglify-js глобально с npm путем запуска следующей команды:

    После установки запустите make из корневого каталога Bootstrap — и все готово.

    Кроме того, если у вас установлен watchr, Вы можете запустить make watch для автоматического ребилдинга каждый раз после редактирования файла в библиотеке Bootstrap (это не обязательно, просто удобный метод).

    Командная строка

    Установите LESS command line tool (инструмент для создания командной строки) посредством Node и запустите следующую команду:

    Не забудьте добавить —compress в эту команду, если вы пытаетесь сэкономить байты!

    Javascript

    Загрузите последнюю версию Less.js и добавьте путь к нему (и к Bootstrap) в тег .

    Для перекомпиляции .less файлов, сохраните их и перезагрузите страницу. Less.js автоматически компилирует и загружает файлы в локальное хранилище.

    Неофициальное расширение Mac

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

    Еще приложения

    Crunch

    Crunch — хороший редактор и компилятор LESS файлов, разработан на Adobe Air.

    CodeKit

    Созданный тем же парнем, что и неофициальное приложение для Mac. CodeKit — это приложение для Mac, которое компилирует файлы LESS, SASS, Stylus и CoffeeScript.

    Simpless

    Приложение для Mac, Linux и PC, работает по принципу drag and drop, компилирует LESS файлы. В дополнение имеет открытый исходный код на GitHub.

    Статический ресурс

    Быстрый старт любого веб-проекта с помощью присоединения компилированных или минимизированных файлов CSS и JS. Отдельные уровни для простых и продвинутых обновлений.

    Структура файлов

    Загрузите последнюю компилированную версию Bootstrap и поместите ее в свой проект. Например, у вас могло получиться нечто подобное:

    Используйте стартовый шаблон

    Скопируйте следующий основной код HTML, чтобы начать работу.

    Индивидуальный код

    Работайте с привычным для вас кодом CSS, JS и прочими, если нужно. Вы всегда можете расширить Bootstrap для своих целей с помощью ваших личных файлов CSS и JS.

    Илон Маск рекомендует:  Что такое код fputs
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL