Использование CSS-препроцессора LESS на сервере Ubuntu

Java, Ubuntu, VPS | Amber | Комментировать запись

Что такое LESS?

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

LESS можно использовать на стороне сервера и на стороне клиента. Для компиляции CSS на серверной стороне понадобится Node.js; на клиентской стороне для этого нужно загрузить файл javascript и добавить его на страницу.

Примечание: на самом деле, загружать javascript на сайты на стадии производства не рекомендуется; но если это все-таки необходимо, используйте специально разработанный «режим наблюдения» (watch mode).

Данное руководство продемонстрирует установку и запуск LESS на серверной стороне. Для этого понадобится предварительно настроенный сервер Ubuntu и веб-сервер (чтобы иметь доступ к браузеру). Кроме того, нужно установить Node.js и NPM (Node Package Manager); чтобы получить инструкции по установке этих программ, читайте эту статью.

Установка LESS

Итак, установив Node.js и NPM, запустите следующую команду, чтобы установить LESS:

npm install -g less

После установки LESS на виртуальный выделенный сервер используйте командную строку, чтобы скомпилировать файлы .less в .css. Чтобы попробовать сделать это, перейдите в document root веб-сервера (по умолчанию в Apache это каталог  /var/www) и создайте файл .less:

nano /var/www/test.less

В этот файл внесите следующее объявление CSS (обратите внимание, что язык LESS – это немного дополненный язык CSS):

#box {
color:red;
}

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

lessc /var/www/test.less

В окне терминала появятся выходные данные. Чтобы внести их в файл .css (что, как правило, необходимо), задайте целевой файл:

lessc /var/www/test.less > /var/www/test.css

Теперь на сервере есть новый файл .css, содержащий скомпилированные операторы css из файла .less.

Чтобы LESS уменьшил вывод css, внесите в команду опцию –х:

lessc /var/www/test.less > /var/www/test.css -x

Это создаст готовый к производству уменьшенный файл css. Чтобы узнать больше о командах LESS, посетите этот сайт или запустите команду lessc без параметров.

Язык LESS

Так чем же LESS лучшее обычного CSS? Вот несколько преимуществ данного препроцессора.

Переменные

LESS позволяет использовать в css переменные; например:

@white: #fff;
#white-box {
color: @white;
}

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

#white-box {
color: #fff;
}

Таким образом, некоторые параметры (например, цвет) можно задать единожды, а затем просто использовать в других таблицах стиля (stylesheet).

Примешивания (миксины; mixins)

Миксины позволяют повторно использовать существующие объявления стиля и «смешивать» свойства из нескольких наборов правил.

Например, такой код:

shape {
size: 100%;
padding: 20px;
}
.box {
.shape;
background-color: red;
}

компилируется в:

.box {
size: 100%;
padding: 20px;
background-color: red;
}

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

Вложения (Nesting)

Еще одна полезная функция LESS – возможность вкладывать определения. Например:

.box {
color: red;
.box-inner {
max-width: 80%
}
}

компилируется в:

.box {
color: red;
}
.box .box-inner {
max-width: 80%
}

Это позволяет сократить и более логично организовать код.

Операции

Также LESS позволяет выполнять операции над числами и значениями переменных. Например:

@length: 10px + 20;
.box {
width: @length / 2;
}

компилируется в:

.box {
width: 15px;
}

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

Функции

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

.box {
color: saturate(#398bce, 5%);
}

Функция saturate() будет установит свойство насыщенности цвета элемента .box на 5%.

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

Импортирование

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

@import "base";

Он объединит все объявления, сделанные в файле base.less. Таким образом доступные переменные и миксины можно размещать где угодно. Единственное, что нужно отметить: если не указать расширение файла, LESS автоматически интерпретирует импортированный файл как файл с расширением .less. Чтобы импортировать простой файл .css, нужно просто указать расширение. Если же задать любое другое расширение, оно также будет интерпретировано как .less.

Итоги

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

Кроме того, существуют приложения с графическим интерфейсом, позволяющие использовать LESS на компьютере. Они также включают в себя компилирование файлов .less в css. Можно использовать  кросс-платформенные компиляторы (как Crunch или Mixture), которые работают как на Windows, так и Mac, а также подобрать компилятор для конкретной платформы. Такие приложения можно найти здесь.

Также можно попробовать поработать с Sass, еще одним популярным процессором CSS. На нашем сайте есть руководство по работе с ним.