Как установить препроцессор less

Начинаем работатать

Обзор Less, как скачать и использовать, примеры и др.

Начинаем работатать с Less

Less является препроцессором CSS. Он расширяет язык CSS, добавляя такие возможности, как переменные, миксины, функции и многие другие техники, которые сделают Ваш CSS более поддерживаемым, «темизируемым» (да-да, речь про поддержку стилистически единых тем оформления) и расширяемым.

Например, запись на Less:

превратится после компиляции в

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

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

Установка

Самый простой спосок установить Less на сервере – использовать npm, менеджер пакетов node.js, примерно так:

Использование из командной строки (cli)

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

To see all the command line options run lessc without parameters or see Usage.

Usage in Code

You can invoke the compiler from node, as such:

Configuration

You may pass some options to the compiler:

See Usage for more information.

Third Party Tools

See the Usage section for details of other tools.

Client-side Usage

Using less.js in the browser is great for development, but it’s not recommended for production

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.

Next, download less.js and include it in a tag in the element of your page:

Browser Options

Options are defined by setting them on a global less object before the :

Or for brevity they can be set as attributes on the script and link tags (requires JSON.parse browser support or polyfill).

Где взять Less

Загрузка через браузер

Загрузка исходного кода

Загрузите свежую версию исходников Less напрямую с GitHub.

Клонировать или форкнуть на GitHub

Форкните проект и отправьте нам pull request!

Установка через Bower

Установите скрипт less.js, запустив следующую команду:

Подключение Less через CDN

Вопросы по лицензии

Less is released under the Apache 2 License (though there are plans to dual license it). Copyright 2009-2018, Alexis Sellier and the Less Core Team (see about). Boiled down to smaller chunks, it can be described with the following conditions.

READ  Как установить виндовс 7 с диска без ключа

It allows you to:

It forbids you to:

It requires you to:

It does not require you to:

The full Less license is located in the project repository for more information.

Less and these docs are maintained by the core Less team.

Documentation source code released under the MIT License, documentation under CC BY 3.0.

Источник

Препроцессор 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 возьмите любой редактор кода (это может быть даже простой блокнот) и напишите в нем следующий код:

READ  Как установить посудомоечную машину самостоятельно видео горение

Я сохраню свой файл так: 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

Что такое LESS?

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

READ  Как установить наилучшее быстродействие windows 10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Поделиться с друзьями
Как подключить и установить...
Adblock
detector