как установить less под windows
Установка препроцессора LESS
Препроцессоры существенно упрощают написание css стилей, позволяют избавить от избыточности и превращают привычный нам css в полноценный язык программирования. В данной статье мы рассмотрим как производится установка препроцессора Less.
Для работы нам потребуется NODE.JS и пакетный менеджер npm
Установка NODE.JS и NPM
Первым делом нам необходимо скачать NODE.JS с официального сайта https://nodejs.org/
Чтобы проверить всё ли мы правильно установили, откроем терминал и введём две команды:
Данные команды выводят версию node.js и npm
Способы компиляции LESS
Есть несколько способов как можно компилировать less:
Через IDE PHP STORM
Если вы работаете в IDE PHP STORM, то создайте новый проект, откройте терминал программы и напишите данную команду в нем.
Чтобы установить компиляцию Less в PHP STROM необходимо выполнить следующие действия:
Компиляция через Терминал
Данный способ неудобен постоянной подачей команды на компиляцию, что существенно замедляет разработку.
Компиляция через HTML файл
Неудобство данного способа в подключении избыточного файла less.js.
var less = require(‘less’); var fs = require(‘fs’); var lessContent = fs.readFileSync(‘style.less’,
Теперь в терминале вызовем наш файл:
Компиляция через GULP
Создаём файл зависимостей packege.json
Установка пакетов less gulp без сохранения на продакшене
Установка дополнительный пакетов
Препроцессор CSS LESS. Изучаем LESS чтобы ускорить версктку сайта и веб-страниц.
Установка LESS на Windows 10. LESS компиляторы, онлайн компиляция LESS в CSS
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов и ее раздел Препроцессор LESS. Не так давно была публикация о том, что такое CSS препроцессор LESS, в которой мы поговорили о функционале и возможностях LESS, посмотрели на его плюсы и минусы, а так же разобрались с тем, как LESS расширяет возможности написания CSS кода. Эта запись является инструкцией по установке LESS на Windows 10. Из нее вы узнаете, как установить компилятор LESS на Windows 10, попробуете скомпилировать свой первый LESS файл.
Установка LESS на Windows 10. LESS компиляторы, онлайн компиляция LESS в CSS
Отмечу, что для установки LESS нужна будет платформа Node.js, а компиляция LESS файлов происходит через командную строку, поскольку такой подход удобен не каждому, мы еще рассмотрим графические компиляторы LESS для Windows 10, а так же вы найдете здесь ссылки на сайты, которые позволяют производить компиляцию LESS в CSS онлайн. Помимо этого я постараюсь обозначить проблемы, которые могут у вас возникнуть из-за использования графических компиляторов и онлайн компиляторов LESS.
Установка LESS на Windows 10. Установка платформы Node.js на Windows
Мы уже упоминали о том, что CSS препроцессор LESS является кроссплатформенным. Кроссплатформенность LESS достигается за счет того, что для компилятор LESS использует платформу Node.js, которая работает на любой операционной системе. Поэтому, чтобы установить LESS компилятор на Windows (как и на любую другую ОС) необходимо сперва установить платформу Node.js, на которой будет работать LESS компилятор. Для вас я составил подробную инструкцию по шагам о том, как установить Node.js на Windows и затем установить LESS компилятор, приступим.
Первый шаг, который нужно совершить, чтобы установить LESS – скачать Node.js. Скачать Node.js можно с официального сайта: https://nodejs.org/en/.
Скачиваем Node.js, чтобы установить компилятор LESS на Windows
Если вы используете Windows, то, нажав на большую зеленую кнопку скачаете инсталлер Node.js. Запустите инсталлер и следуйте указаниям программы. Путь, по которому я буду устанавливать Node.js: C:\Program Files\nodejs\. У нас сейчас не стоит цели разобраться с тем, как устроена Node.js, поэтому я не буду подробно описывать ее компоненты.
После завершения установки LESS вы получите примерно следующее сообщение, которое зависит от версии LESS, которая была установлена:
Мы установили LESS на Windows, теперь давайте попробуем скомпилировать LESS код в код CSS. Напомню, что параллельно мы рассматриваем CSS препроцессор SASS и SCSS и там мы уже рассмотрели процесс установки компилятора SASS на Windows, пример я возьму оттуда. Вообще вы этих рубриках я буду стараться использовать одинаковые примеры, чтобы вы видели разницу между SASS и LESS. Для того чтобы скомпилировать LESS в CSS возьмите любой редактор кода (это может быть даже простой блокнот) и напишите в нем следующий код:
Я сохраню свой файл так: style.less. На самом деле код этого файла ничем не отличается от CSS, но это сделано специально, чтобы не отвлекаться на объяснение особенностей LESS в то время, как мы говорим о компиляции. Сохраните файл style.css в папку nodejs, чтобы компилятор «видел» этот файл.
После этого запустите командную строку Windows с правами администратора и выполните две команды:
Первая команда позволяет перейти в папку nodejs, второй командой вы указываете компилятору файлы с кодом LESS и говорите о том с каким именем вы хотите получить файл. Скомпилированный CSS файл вы найдете в папке nodejs. В отличии от компилятора SASS, компилятор LESS не будет автоматически компилировать ваш LESS код в CSS.
Онлайн компиляция LESS в CSS. Минусы и плюсы онлайн компиляции LESS
Как и для SASS и SCSS для LESS существуют онлайн компиляторы, которые «превращают» код LESS в CSS без лишних хлопот. Онлайн компиляция LESS удобна для новичков тем, что они могут сразу видеть, как происходит превращение LESS в CSS, так же преимуществом онлайн компиляторов является то, что ими можно пользоваться на любом компьютере, где есть интернет и они не требуют установки. В качестве примера онлайн компилятора LESS: http://winless.org/online-less-compiler.
А еще онлайн компиляторы избавят вас от работы с командной строкой, для некоторых это критично, для некоторых нет. Но, на самом деле, не всегда удобно использовать командную строку, кто бы там чего не говорил.
Данный онлайн компилятор LESS представляет собой два окна: в левое окно вы вводите код LESS, в правом окне вы видите CSS код, который был сгенерирован после анализа LESS кода, очень удобно и наглядно.
Но у онлайн компиляторов LESS есть минусы. Первый заключается в том, что их не очень удобно использовать в работающих проектах, так как вам всегда придется копировать CSS код и затем загружать его на сайт.
Второй минус онлайн компиляции LESS заключается в том, что у вас нет полного понимания того, какая версия LESS реализована в этом онлайн компиляторе, из-за этого могут быть ошибки и непредсказуемый код.
Третий минус онлайн компиляции в том, что без доступа к интернету вы им не воспользуетесь.
Компиляторы LESS для Windows
Но мы можем избавиться от минуса, заключающегося в том, что не всегда есть доступ в интернет. Установив компилятор LESS с графическим интерфейсом на Windows. Давайте посмотрим на преимущества графических компиляторов LESS в Windows:
Но, как и всегда, у графических компиляторов в Windows есть и минусы:
Компиляторов для LESS в Windows много, но я приведу лишь два примера. Первый компилятор LESS в CSS для Windows универсальный: Koala, он позволяет компилировать не только LESS, но и SASS код. Второй Windows компилятор LESS называется Winless. Оба этих компилятора рекомендуют использовать сами разработчики LESS. Обзор обоих компиляторов Windows скоро будет на моем сайте.
Less CSS для пользователей Windows
Установка
После установки откройте командную строку и введите следующую команду: gem install less
Less в действии
Пример использования
После компиляции этого css кода мы получим
Не круто ли?
Less действительно может пригодиться
Я надеюсь вы дадите Less шанс и попробуете этот замечательный плагин в действии. Всего хорошего!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.position-absolute.com/articles/introduction-to-less-css-abstraction-on-windows/
Перевел: Станислав Протасевич
Урок создан: 11 Февраля 2011
Просмотров: 28203
Правила перепечатки
5 последних уроков рубрики «Разное»
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
Разработка веб-сайтов с помощью онлайн платформы Wrike
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
LESS: программируемый язык стилей
Что такое LESS?
LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в CSS. Он вводит переменные, операции, function-like элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.
Как использовать LESS
Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл. Не бойтесь слова «компилировать» (я постоянно его использую), это очень просто.
Используем LESS и Javascript файл
Для начала нужно скачать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт.
Удостоверьтесь, что вы прикрепили LESS файл перед JS.
Теперь LESS файл будет работать также как и обычный CSS.
Компилируем LESS файл
Хотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл. Конвертеры: для Windows – Winless и LESS.app для Мака.
Укрощаем мощь LESS
Наконец давайте немного развлечемся – попишем LESS код. Как вы увидите код очень легко читать и понимать, так как используется сходный с CSS синтаксис.
Переменные
Переменные в LESS работают так же как в PHP, JS и в большинстве других языков программирования. Вы можете использовать их для хранения значения, и затем использовать переменные вместо самого значения всякий раз, когда вам это нужно.
В примере выше мы объявляем переменную @header-font и записываем туда значение «Georgia». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia. Если же мы решим, что Trebuchet MS лучше подходит для наших заголовков, то нам не нужно будет просматривать весь файл, мы просто изменим значение переменной.
Я нашел отличное применение переменным в определении цветов сайта. В старые добрые времена (которые были не так давно) я использовал что-то вроде этого:
Нет ничего плохого в том, чтобы документировать ваши цвета также как здесь, это хорошая практика, проблема заключается в том, что документация не имеет ничего общего с функциональностью ваших стилей. Если вы решили изменить цвета после 2000 строки кода, а затем передумали на 3567 строчке, то будет чрезвычайно сложно исправить все цвета и документацию.
С LESS мы можем модифицировать и одновременно документировать наш рабочий процесс.
Область видимости переменных
Область видимости переменных описывает места, где они доступны. Если вы определите переменную в самом начале LESS файла, то она будет доступна для любого кода написанного после.
Также можно определять переменную внутри CSS правила. В этом случае переменные не будут доступны вне этого правила, они могут быть использованы локально.
В этом примере LESS не будет сконвертирован из-за ошибки, color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально.
Здесь ссылка будет окрашена в белый, а у кнопки будет черный фон.
Переменные в переменных
Если вы кодили на PHP, то вы знаете что можно объявить имя переменной в другой переменной.
Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого.
Константы и Переменные
Важно отметить, вопреки тому, что вы только что прочитали, переменные в LESS больше похожи на константы. Это значит, что они, в отличие от переменных, могут быть определены только один раз.
Операции
Вы можете добиться невероятно точного контроля с использованием операций в LESS. Идея проста:
Код выше устанавливает переменную unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два.
Можно использовать операции умножения, деления, сложения и вычитания. Что бы создать блок с рамкой увеличивающей ширину сторон по часовой стрелке, можно использовать следующий код:
Управление цветом
Моя любимая особе6нность LESS – управление цветом. Можно использовать операции для смешивания цветов и несколько специальных функций для работы с цветом.
Цветовые операции
Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.
Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ — более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.
Этот код создает красную кнопку с немного затемненной рамкой. Это частая ситуация и определение лишь одного цвета – большая помощь.
Другое замечательное применение этого – создание градиентов. Я обычно выбираю средний цвет и объявляю градиент исходя из него. Я делаю начало немного светлее и конец немного темнее. Результатом будет приятный переход, что-то вроде этого:
Цветовые функции
Есть гораздо больше возможностей для работы с цветом; LESS позволяет манипулировать ими на канальном уровне. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Взгляните на следующие примеры с картинками, чтобы понять, что каждый из них делает.
Извлечение информации о цвете
Каждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую.
Это может показаться слишком мелочным – зачем нам нужна эта информация, когда мы можем просто ввести HEX значение? Если вы нормальный человек, то вы не сможете с ходу расшифровать HEX цвет. HEX значения отображают RGB спектр: первые два символа контролируют количество красного, следующие два — количество зеленого и последние два – количество синего.
Достаточно очевидно, что #ff0000 это красный, так как это RGB(255,0,0). Тона красного, никакого зеленого и синего. Тем не менее, если вы увидите #1f6b2d, то будет трудно декодировать, что это темно-зеленый. В HSL представлении hue (тон) управляет всем, вы могли бы просто назвать цвет, остальное просто задаст тон (это не совсем верно, но всё происходит именно так).
Имея это в виду, если вы нашли хороший пурпурный цвет как #e147d4, вы очень легко можете отыскать различные цвета с точно таким же оттенком. Скажем, вы хотите создать сливочную, более пастельную версию #e147d4, вот что можно сделать:
Новый цвет будет иметь тот же тон, но другие насыщенность и яркость. Результатом будет #c480bf, к которому гораздо труднее перейти от #e147d4 используя лишь HEX.
Совмещение функций
LESS позволяет использовать функции внутри функций, так, если надо обесцветить и перевернуть (spin) цвет, можно просто сделать так:
Вложенность
Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:
Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.
В LESS мы можем вложить эти правила, что даст нам более короткую и логичную версию наших стилей. Например:
Отступы не обязательны, но они делают код более читабельным. Уровни вложенности не ограничены.
Примеси (mixins)
Примеси в LESS избавят вас от набора излишнего кода. Вам когда-нибудь приходилось создавать закругленную рамку в которой только верхние углы скругленны?
И так каждый раз… С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис.
Примеси с параметрами
Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 6px на верхних углах. А если мы захотим создать элемент с радиусом в 3px? Мы должны объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, мы должны использовать примеси с параметрами!
Они сходны с функциями, потому что при их вызове можно менять значения. Давайте перепишем пример с border-radius, чтобы посмотреть, как это работает.
Стандартные значения
Если вы обычно используете одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение.
Множественные параметры
Вы также можете использовать множественные параметры, чтобы определить более сложные примеси.
Используем все аргументы за раз
Еще одна опция при использовании аргументов это их объединение. Сокращённые свойства в CSS имеют множественные значения, записанные одно за другим.
Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию:
@arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет:
Параметрические примеси без параметров
Также можно использовать параметрические примеси без параметров. Это используется тогда, когда вам не нужно выводить примесь в CSS, но вы хотите чтобы ее правила применялись к элементу в котором она используется.
CSS вышеприведенного кода будет таким:
Готовый CSS будет следующим:
В основном это используется для уменьшения размера CSS файла.
Пространство имён
Пространство имён в языках программирования обычно используется для группировки сходных по функциональности элементов. Мы можем добиться подобного в LESS, объединяя наш код с помощью примесей.
Начиная работу над новым сайтом, основанным на вашем фреймворке, вы можете добавить связку #my_framework и использовать ее не засоряя пространство имён.
Также это отличный способ сделать возможным быструю смену и доработку тем. Если вы разрабатываете несколько тем для вашей компании, то для смены шаблонов на лету, вы можете поместить их все в один LESS файл, используя связки.
Строковая интерполяция
Строковая интерполяция это еще одно причудливое слово, означающее, что эта произвольная строка может храниться в переменной, а затем использоваться в значении свойства.
Это может быть полезно при создании централизованного фреймворка.
Экранирование
Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Вы могли заметить, что в примере про градиенты я не позаботился о пользователях Internet Explorer.
Если вы хотите создать градиент в IE, вы должны сделать что-то вроде этого:
Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его.
Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута.
Импорт
Как и в обычном CSS вы можете импортировать файлы. LESS позволяет импортировать CSS и LESS используя следующий синтаксис:
Первый импорт достаточно очевиден. Он импортирует CSS правила определённые в reset.min.css без обработки их LESS парсером.
Второй импорт вставит содержание framework.less и обработает его как любые другие LESS правила.
Третий импорт работает также как и второй. Если расширение не установлено, то препроцессор считает его LESS файлом.
Комметарии
Естественно, многострочные комментарии доступны в LESS в таком же виде, как и в CSS. Также LESS разрешает использование однострочных комментариев как в PHP или Javascript, с помощью двойного обратного слеша.
Чего не хватает?
Несмотря на то, что LESS восхитительный, всё же когда вы начнёте использовать его, обнаружатся некоторые недостатки, хотя они не очень беспокоят.
Одна из особенностей, которую я хотел бы видеть, это пре-пре-обработка (согласен, звучит это бессмысленно).Помните, как строки могут быть экранированы, чтобы не проходить через анализатор? Текущий способ не позволяет использовать градиенты с изменяемыми цветами.
Этот код прекрасно работает, но цвета должны быть жёстко определены. Если строчка экранирована, то переменные не обрабатываются. Было бы неплохо иметь опцию, в которой переменные в экранированных строках обрабатывались до отправки в CSS файл.
Заключение
Как и с любой новой технологией или методом возникает злоупотребление. Помните отражающиеся логотипы и «стеклянные» кнопки на заре Web 2.0 эры?
Вы не обязаны вкладывать все ваши правила, вы не должны создавать переменные для всего или примеси просто для ширины рамки.
Если вы не знаете когда не использовать потрясающую мощь LESS, ваш LESS код станет таким же нечитаемым как обычный CSS и таким же сложным для поддержки. Фокус в том, чтобы знать, когда использовать данные функции и методы, а когда обычный старый CSS лучше.
В дополнение я советую не использовать LESS файл. В этом нет ничего плохого, но нет причины загружать LESS файл и обрабатывать его. Несомненно, скрипт очень быстрый, но я уверен что без него будет быстрее. Я обычно разрабатываю все мои сайты с LESS, беру выходной файл, сжимаю его и использую обычный CSS файл.
Компиляция
Если вы помните, то препроцессоры предлагают нам свой вариант синтаксиса для некоторых или всех конструкций языка, надстройкой над которым они являются. И CSS-препроцессоры не исключение.
Для того, чтобы браузер понимал код, написанный с использованием синтаксических конструкций препроцессора, его нужно компилировать в понятный для него язык. Таким языком для браузера, как не сложно догадаться, является CSS.
Существует несколько вариантов того, как можно перейти от Less к CSS.
Компиляция в браузере (less.js)
Наиболее простой способ использования CSS-препроцессора, но в тоже время малопопулярный. Альтернативные решения удобнее и предоставляют наиболее интересный функционал. Применяется на этапе разработки или отладки проекта, когда важен результат компиляции, а не её скорость.
Способ не желателен к применению на так называемом «продакшене» в виду того, что имеет серьёзные проблемы со скоростью и сильно зависит от производительности устройства, а также скорости интернет-соединения. Помимо этого увеличивается объем загружаемых данных, так как браузеру пользователя приходится загружать less-файлы и файл библиотеки. Только после полной загрузки необходимых ресурсов начинается процесс компиляции less-кода в CSS.
Пример 1.4.1
Пример демонстрирует использование CSS-препроцессора Less прямиком в браузере, без предварительной компиляции CSS.
Содержимое файла _styles.less :
Пример 1.4.2
Если в файле стилей допущена ошибка, то компилятор отобразит сообщение, в котором будет присутствовать следующая информация:
Такой подробный отчёт позволит разработчику в удобной форме получить полную информацию о допущенной ошибке и в максимально короткие сроки приступить к её устранению.
Пример 1.4.3
Другие параметры настроек можно посмотреть в документации. Так как этот метод находится в статусе «не рекомендуется», то и подробно рассматривать его нет смысла.
Компиляция из командной строки (lessc)
Как мы уже хорошо знаем, препроцессор Less написан на JavaScript. А ещё лучше мы знаем, что лучший друг JavaScript теперь — Node.js. Отсюда вытекают новые возможности для работы в командной строке. И Less предлагает нам такой инструмент для работы в ней.
Работа из командной строки предполагает наличие установленного Node.js. Помимо этого, необходимо глобально установить пакет less — это можно сделать командой:
Рассмотрим синтаксис команд npm:
Общение с консолью осуществляется на примитивном уровне. Бегло ознакомимся с основными доступными командами:
Компилирование файла с именем _styles.less без сохранения результата:
Компилирование файла _styles.less с сохранением результата в файл _main.css :
Как вы уже поняли, для Less доступно некоторое множество плагинов, которые добавляют различный функционал препроцессору. Включением и выключением этих плагинов, а также их управлением, можно заниматься и с помощью консольных команд.
В случае, как и с компиляцией в браузере, этот метод не особо популярен, так как существуют другие, более интересные по возможностям.
Если вас заинтересовал именно этот способ, то обязательно посетите документацию препроцессора. Кроме тех параметров, что были озвучены здесь, там вы сможете найти около двух десятков различных других специфических параметров, благодаря которым ваша работа с препроцессором в командной строке станет куда гибче.
Компиляция, используя системы сборки
Настал тот момент, когда все скучные способы компиляции пройдены, а впереди есть ещё, которые выглядят куда интереснее всех остальных, включая и этот. Но я не могу обойти стороной самый популярный и гибкий способ.
Сейчас, если вы пишете Open Source проект, то хорошим тоном будет автоматизировать всё, что возможно и имеет смысл. Это делается для того, чтобы другие разработчики могли использовать ваши наработки и не мучиться с подготовкой проекта к «употреблению». Помимо этого, автоматизация действий, будь то банальное переименование файла или компиляция файлов препроцессора, экономит время не только других разработчиков, но и ваше.
Система сборки — это инструмент для автоматической, гибкой и удобной сборки проектов из командной строки с использованием ранее обозначенных инструкций (задач).
Если попытаться упростить эту формулировку, то получится следующее:
Система сборки — это инструмент, который автоматически преобразует проект в соответствии с заранее написанными правилами.
Первым популярным сборщиком был Grunt, позднее появился Gulp и самыми молодыми сейчас являются Brunch и Broccoli. Так повелось, что Grunt и Gulp воюют на одном универсальном поприще, покрывая своим функционалом и доступными плагинами почти весь спектр задач. А вот Brunch сразу же обозначил себя как сборщик для фронтенда и слегка намекает, что первые двое ему не родня, да и он не такой, как они.
Для Grunt и Gulp доступно большое количество различных пакетов, которыми можно выполнять практически любые задачи: от простейшего переименования файлов до сборки крупных приложений. Причём у Grunt их намного больше. А вот Brunch и Broccoli таким похвастаться не могут, но все основные пакеты для фронтенд разработки доступны уже сейчас. Практически любой недостающий функционал можно добавить, написав свой пакет, и делается это довольно просто.
К счастью, настройка систем сборки — это не основная тема книги. Поэтому конкретно рассматривать каждый из сборщиков я не буду, а предложу посмотреть уже готовые конфигурационные файлы для компиляции Less в архиве, идущем вместе с книгой.
Приложения для компиляции
Вот он, самый простой и удобный способ для проектов, использующих препроцессоры, причём не только CSS-препроцессоры, но и JS и HTML.
Существуют такие приложения, которые позволяют управлять проектами без написания кода, использования командной строки и систем сборок. Они написаны для людей, желающих делать своё дело и не вникать в некоторые тонкости, хотя бы на начальном этапе своей карьеры.
Такие приложения имеют довольно обширный функционал и, как правило, умеют:
Среди всех подобных приложений можно выделить следующие решения:
Ранее я использовал Prepros для своих локальных проектов, так как он предлагает наиболее интересный для меня функционал. Остальные решения также хороши, но мне больше всего приглянулся именно он.
Проекты Koala и Mixture более не обновляются и представлены здесь лишь в дань уважения.
Если вы не хотите писать конфигурационные файлы для Grunt, Gulp и им подобным системам сборки, то это ваш выбор.
Альтернативные методы
Существуют решения для отдельно взятых сред (редакторов, IDE и т.д.), позволяющие использовать CSS-препроцессоры. В некоторых IDE есть встроенные средства для использования препроцессоров, а в тех, где нет, в общем случае, можно установить необходимые плагины, добавляющие такую возможность. По этой ссылке приведён обширный список таких плагинов.
Если для использования препроцессора Less на сервере, построенном с применением Node.js, требуется лишь официальный пакет доступный в npm, то на других платформах необходимы специальные библиотеки, а иногда и несколько (привет Java). Такой подход обеспечивает обмен переменными между Less и использующим его языком, что позволяет добиться компиляции файлов, в зависимости от контекста действий пользователя в приложении.
Отладка
Отладка — это процесс обнаружения, локализации и исправления возникающих ошибок в работе приложения. В случае с CSS-препроцессором, приложением будут являться препроцессорные файлы, так как именно в них могут возникать ошибки или «неточности». И если с ошибками бороться нам поможет сам компилятор, то исправлять «неточности» будет сложнее, из-за некоторых особенностей препроцессоров.
Карта кода (Source Maps)
Во время разработки и после неё, скомпилированные файлы стилей и исходные файлы могут сильно различаться. Происходит это из-за компиляции и обработки файлов. Если в процессе компиляции происходит раскрытие конструкций, написанных на препроцессорном языке в «чистый» CSS-код, то на выходе получается, как правило, большее количество строк кода. Выражается это в том, что в инспекторе браузера у тега стилей элемента указан один номер строки, а на самом деле он совсем другой.
Пример 1.4.4
В этом примере представлен препроцессорный и скомпилированный файлы. Обратите внимание лишь на отличающееся количество строк, работу препроцессора и её результат на выходе.
Файл препроцессора:
Скомпилированный файл:
Замечательно, с физикой проблемы разобрались. Для её решения на помощь спешит так называемая «карта кода». Явление это не уникальное и встретить его можно, например в Visual Studio 2012, правда там карта действительно похожа на карту, а тут информация, ориентированная лишь на браузер. Когда я говорю, что файл предназначен для браузера, то имею в виду, что понять его человеку будет практически невозможно:
Теперь обратите внимание на изображение окна браузера, в котором слева показан скомпилированный файл без карты кода, а справа — с ней.
В первом случае видно, что селектор объявлен на 6 строке CSS-файла, но так как мы работаем с исходниками в формате Less, то нам эта цифра ни о чём не говорит — у нас на 6-ой строке находится другой код.
Во втором случае, когда применяется карта кода, все становится на свои места и указывается не только правильный номер строки объявления селектора, но и файл её содержащий. Название файла будет полезно тогда, когда я расскажу вам про подключение файлов друг к другу.