Применение LESS на практике популярные программы для компиляции в CSS

Содержание материала:

CSS-препроцессоры и преимущество их использования

December 05, 2013

Статья на NetTuts+, написанная Johnathan Croom в 2012 году.

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

В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров — Sass, LESS и Stylus.

Введение

Препроцессоры CSS были созданы с одной единственной целью — добавить стилевым таблицам CSS мощь и одновременную гибкость без нарушения кросс-браузерности. Все препроцессоры компилируют созданный с помощью их синтаксиса код в стандартный CSS-код, который понимает и использует любой браузер, каким бы древним он (браузер) не был.

Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.

Синтаксис

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

Sass & LESS

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

Вид обычного файла в синтаксисе Sass или LESS представлен ниже:

Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.

Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.

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

Синтаксис Sass (старая версия) выглядит следующим образом:

Stylus

Для своих файлов этот препроцессор использует расширение . Синтаксис препроцессора Stylus более многословный (прим. переводчика: автор что-то напутал здесь) в нем применяется за основу стандартный синтаксис CSS, но допускается применение различного сочетания скобок, двоеточий и точек с запятой.

Примеры синтаксиса Stylus:

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

Переменные

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

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

Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ :

Stylus

Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ . Как правило, завершающий символ строки точка с запятой также не нужен, за исключением случая, когда имя переменной и ее значение совпадают.

Еще один достойный упоминания момент заключается в том, что Stylus (0.22.4) компилирует код, даже если в нем имя переменной объявлено с помощью символа , но при вызове этой переменной в коде подстановки значения переменной не происходит.

Другими словами, не выполняется такая операция:

Скомпилированный CSS

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

Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.

Прим. переводчика: здесь автор немного утрирует ситуацию, так как в любом нормальном редакторе кода имеется функция поиска.

Ниже представлен CSS-код после выполнения компиляции:

Вложенность (nesting)

Если в коде CSS поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя — занятие утомительное.

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

Sass, LESS & Stylus

Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:

Скомпилированный CSS

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

Подмешивания (mixins)

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

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

Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.

Style

Скомпилированный CSS

Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:

Наследование (inheritance)

При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:

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

В противоположность этому применяются наследование. Наследование — это возможность для одних CSS-селекторов наследовать свойства у другого селектора.

Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы .

Sass & Stylus

Скомпилированный CSS

Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.

Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.

Вот как может выглядеть LESS-код с наследованием:

Скомпилированный CSS

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

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

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

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

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

Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.

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

Скомпилированный CSS

Функции работы с цветом

“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при и многое другое.

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

“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример — объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета :

Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation.

Ниже показан пример того, как можно применять “цветовые” функции в LESS:

Stylus

Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation.

И пример использования “цветовой” функции в Stylus:

Арифметические операции

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

Прим. переводчика: стоит упомянуть о функции из CSS3 по имени , которая также позволяет выполнять внутри CSS-кода простые арифметические операции.

Sass, LESS & Stylus

Практические примеры

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

Браузерные префиксы

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

Например, создадим для всех трех препроцессоров миксин скругления углов блока:

Stylus

Скомпилированный CSS

Трехмерный текст

Создание эффекта трехмерности для текста с помощью CSS-свойства является прекрасной идеей. Единственная проблема заключается в работе с цветом, которая достаточно трудная и обременительная.

Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:

Stylus

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

Скомпилированный CSS

Колонки

Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости) простой и быстрой:

Stylus

Скомпилированный CSS

Некоторые уловки препроцессоров

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

Сообщение об ошибках

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

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

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

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

В CSS-препроцессоре при компиляции из кода удаляются любые комментарии в виде двойного слеш’а ( ). Но, в тоже время, блочные комментарии ( ) остаются в коде без изменений.

На заметку: при компиляции в минимизированную версию CSS-файла удаляются любые комментарии.

Заключение

Каждый из трех рассмотренный в этой статье CSS-препроцессоров (Sass, LESS и Stylus) обладает своим собственным, уникальным способом решения одной и той же задачи. Это дает в руки разработчика возможность выбора, каким способом выполнить поставленную задачу. Объединяет все препроцессоры способность расширить горизонты кодера с одновременным сохранением кросс-браузерности и чистоты кода.

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

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

Установка препроцессора LESS

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

Для работы нам потребуется NODE.JS и пакетный менеджер npm

Установка NODE.JS и NPM

Первым делом нам необходимо скачать NODE.JS с официального сайта https://nodejs.org/
Чтобы проверить всё ли мы правильно установили, откроем терминал и введём две команды:

Данные команды выводят версию node.js и npm

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

Есть несколько способов как можно компилировать less:

  1. Через IDE (например PHP STORM)
  2. Запуск через терминал
  3. Подключение в HTML файле
  4. Специальные программы (Koala)
  5. NODE.JS
  6. Компиляция через GULP
Топ-пост этого месяца:  Фреймворк Bootstrap мощь и гибкость современного фреймворка

Через IDE PHP STORM

Если вы работаете в IDE PHP STORM, то создайте новый проект, откройте терминал программы и напишите данную команду в нем.

npm install less

Чтобы установить компиляцию Less в PHP STROM необходимо выполнить следующие действия:

Компиляция через Терминал

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

// Данной командой мы устанавливаем пакет less глобально npm i -g less // Команда для компиляции в файл css (перед файлом less необходимо указать путь от корня) lessc ./style.less new_style.css

Компиляция через HTML файл

Неудобство данного способа в подключении избыточного файла less.js.

var less = require(‘less’); var fs = require(‘fs’); var lessContent = fs.readFileSync(‘style.less’, ); less.render(lessContent, function(err, output)< if(err) throw new Error(err); fs.writeFileSync('rez_style.css', output.css); >);

Теперь в терминале вызовем наш файл:

Компиляция через GULP

Создаём файл зависимостей packege.json

Установка пакетов less gulp без сохранения на продакшене

npm i —save-dev less gulp

Установка дополнительный пакетов

/* gulp-less — преобразует less в css, gulp-concat — сборка одного css из файлов less, gulp-autoprefixer — добавление автопрефиксов, gilp-sourcemaps — отслеживание позиции изменений less файла gulp-clean-css — минификация css browser-sync — синхронизация */ npm i —save-dev gulp-less gulp-concat gulp-autoprefixer gilp-sourcemaps gulp-clean-css browser-sync

Программа 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

Что такое 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 удаляет однострочные комментарии при компиляции, это поведение по умолчанию доступно изменить в его настройках.

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

Что такое 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:

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

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

В окне терминала появятся выходные данные. Чтобы внести их в файл .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;
>

Таким образом, некоторые параметры (например, цвет) можно задать единожды, а затем просто использовать в других таблицах стиля (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 .box-inner <
max-width: 80%
>

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

Операции

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

@length: 10px + 20;
.box <
width: @length / 2;
>

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

Функции

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

.box <
color: saturate(#398bce, 5%);
>

Топ-пост этого месяца:  Урок 3. Плагины и создание HTML файла

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

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

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

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

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

Итоги

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

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

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

Применение LESS на практике: популярные программы для компиляции в CSS

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

Первое что мы сделаем, это переименуем наш css файл в 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, принцип работы простой, в секции подключаем наш LESS файл и после него подключаем скрипт для компиляции. Скрипт тут, качаем последнюю версию.

Серверный вариант:

  • node.js — этим способом пользуется мой коллега, я сам вообще не разбираюсь в серверах, поэтому вот ссылка, которую загуглил:
  • rhino — про этот способ я ничего не знаю, но вот ссылка
  • lessphp — этим способом пользуюсь я. Качаем исходники с сайта. Пишем в секции нашего шаблона следующие записи

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

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

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

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

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

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

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

    Мои впечатления от использования LESS

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

    Во процессе изучения LESS, я пользовался информацией с официального сайта и книгой Басса Джобсена под названием “LESS Web Development Essentials”, которую вы без труда сможете найти и скачать, воспользовавшись Яндексом.

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

    1. Использовать less.js. Скачиваем его с GitHub . Подключаем файл с LESS-кодом и файл less.js, и при каждом обращении к странице будет происходить компиляция
    2. Использовать командную строку. Для этого нужно:
      • Скачать и установить Node.js для Windows или своей ОС
      • Скачать less.js с GitHub
      • Распаковать архив к себе на компьютер в любую удобную папку и добавить эту папку в переменную PATH

    Использовать для компиляции команду:

    >lessc path_to_less\source.less path_to_css\output.css

    Для просмотра справки используется следующая команда:

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

    Также существуют редакторы, в которых можно писать код LESS, например, Crunch. Его не обязательно специально устанавливать для работы с LESS, потому что для всех популярных редакторов кода (например, Eclipse, Sublime Text, Dreamweaver) существуют плагины. Я, например, использую в основном Notepad++. Для него можно скачать xml-файл с настройками для подсветки синтаксиса LESS.

    Итак, переходим к возможностям LESS

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

    Аргументы могут содержать значения по-умолчанию ( @radius:10px ). Кроме того, существует специальная переменная @arguments , через которую доступны все значения, передаваемы в «примесь». Пример:

    Совместно с «примесями» можно использовать условия (guards). Можно использовать несколько условий одновременно. Условия (guards) служат для предотвращения дублирования «примесей». В зависимости от выполнения условия, выводится определенный код. Внутри условий можно использовать встроенные функции LESS.

    В LESS существует возможность вызывать примеси(mixins) несколько раз в зависимости от выполнения условия. Таким способом организуются циклы (loops). Приведу пример:

    Если вы решите создать свою собственную «сетку» для макета веб-страницы, например, такую, как “960 grid system” (http://960.gs/), то без использования циклов (loops) вам будет сложно обойтись. Циклы очень помогут вам в этом случае для генерации CSS-кода «сетки».

    «Примеси» можно размещать в своих «пространствах имен» (namespaces). Вообще-то в «пространствах имен» можно размещать не только «примеси», но и остальной LESS-код, даже тот которых находится совершенно в другом файле.

    Чтобы использовать «примеси» (mixins) необязательно их самостоятельно писать. В сети существует множество сайтов, где можно скачать уже готовые библиотеки «примесей» (mixins).

    При желании каждый разработчик сможет найти для себя что-нибудь полезное.

    Ну что, c примесями немного разобрались, теперь можно перейти к другой, не менее полезной возможности LESS — вложенным правилам (Nested rules).

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

    Во вложенных правилах можно писать код для псевдо-классов и псевдо-элементов. Как в морем примере, я написал правила для псевдо-элемента :before элемента li . Для того, чтобы обращаться к псевдо-элементам и псевдо-классам в коде LESS, нужно использовать символ “&”.

    На что же еще можно обратить внимание при изучении LESS? Конечно же на функции. LESS содержит большое количество встроенных функций. Встроенные функции можно применять для различных операций над данными внутри «примесей», а также условных выражений. В LESS функции сгруппированы по типам. Существуют математические функции, строковые функции, функции для проверки типов данных, функции для работы с цветом и многие другие. Все функции LESS полезны и могут пригодиться в процессе разработки, но особенно интересны функции для работы с цветом. Подробнее с ними вы можете ознакомиться на официальном сайте LESS в разделе “Function Reference”, здесь же я приведу лишь пару из них.

    • Функция saturate() — увеличивает насыщенность цвета, переданного в качестве первого аргумента на значение, переданного в качестве второго аргумента (1-100);
    • Функция darken() — изменяет значение цвета, делая его темнее. Принимает 2 аргумента: первый – цвет, второе – значение в процентах (1-100) на сколько нужно затемнить цвет;
    • Функция >lighten() – работает аналогично функции darken() , но только наоборот, делает цвет, переданный в первом аргументе светлее, на значение в процентах (1-100), переданное во втором аргументе.

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

    Вывод.

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

    В процессе изучения, я сверстал пару страничек с использованием LESS, с которыми вы можете ознакомиться при желании.

    CSS-препроцессоры и преимущество их использования

    December 05, 2013

    Статья на NetTuts+, написанная Johnathan Croom в 2012 году.

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

    В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров — Sass, LESS и Stylus.

    Введение

    Препроцессоры CSS были созданы с одной единственной целью — добавить стилевым таблицам CSS мощь и одновременную гибкость без нарушения кросс-браузерности. Все препроцессоры компилируют созданный с помощью их синтаксиса код в стандартный CSS-код, который понимает и использует любой браузер, каким бы древним он (браузер) не был.

    Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.

    Синтаксис

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

    Sass & LESS

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

    Вид обычного файла в синтаксисе Sass или LESS представлен ниже:

    Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.

    Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.

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

    Синтаксис Sass (старая версия) выглядит следующим образом:

    Stylus

    Для своих файлов этот препроцессор использует расширение . Синтаксис препроцессора Stylus более многословный (прим. переводчика: автор что-то напутал здесь) в нем применяется за основу стандартный синтаксис CSS, но допускается применение различного сочетания скобок, двоеточий и точек с запятой.

    Примеры синтаксиса Stylus:

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

    Переменные

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

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

    Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ :

    Stylus

    Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ . Как правило, завершающий символ строки точка с запятой также не нужен, за исключением случая, когда имя переменной и ее значение совпадают.

    Еще один достойный упоминания момент заключается в том, что Stylus (0.22.4) компилирует код, даже если в нем имя переменной объявлено с помощью символа , но при вызове этой переменной в коде подстановки значения переменной не происходит.

    Другими словами, не выполняется такая операция:

    Скомпилированный CSS

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

    Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.

    Прим. переводчика: здесь автор немного утрирует ситуацию, так как в любом нормальном редакторе кода имеется функция поиска.

    Ниже представлен CSS-код после выполнения компиляции:

    Вложенность (nesting)

    Если в коде CSS поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя — занятие утомительное.

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

    Sass, LESS & Stylus

    Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:

    Скомпилированный CSS

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

    Подмешивания (mixins)

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

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

    Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.

    Style

    Скомпилированный CSS

    Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:

    Наследование (inheritance)

    При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:

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

    В противоположность этому применяются наследование. Наследование — это возможность для одних CSS-селекторов наследовать свойства у другого селектора.

    Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы .

    Sass & Stylus

    Скомпилированный CSS

    Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.

    Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.

    Вот как может выглядеть LESS-код с наследованием:

    Скомпилированный CSS

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

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

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

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

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

    Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.

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

    Скомпилированный CSS

    Функции работы с цветом

    “Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при и многое другое.

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

    “Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример — объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета :

    Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation.

    Ниже показан пример того, как можно применять “цветовые” функции в LESS:

    Stylus

    Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation.

    И пример использования “цветовой” функции в Stylus:

    Арифметические операции

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

    Прим. переводчика: стоит упомянуть о функции из CSS3 по имени , которая также позволяет выполнять внутри CSS-кода простые арифметические операции.

    Sass, LESS & Stylus

    Практические примеры

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

    Браузерные префиксы

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

    Например, создадим для всех трех препроцессоров миксин скругления углов блока:

    Stylus

    Скомпилированный CSS

    Трехмерный текст

    Создание эффекта трехмерности для текста с помощью CSS-свойства является прекрасной идеей. Единственная проблема заключается в работе с цветом, которая достаточно трудная и обременительная.

    Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:

    Stylus

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

    Скомпилированный CSS

    Колонки

    Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости) простой и быстрой:

    Stylus

    Скомпилированный CSS

    Некоторые уловки препроцессоров

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

    Сообщение об ошибках

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

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

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

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

    В CSS-препроцессоре при компиляции из кода удаляются любые комментарии в виде двойного слеш’а ( ). Но, в тоже время, блочные комментарии ( ) остаются в коде без изменений.

    На заметку: при компиляции в минимизированную версию CSS-файла удаляются любые комментарии.

    Заключение

    Каждый из трех рассмотренный в этой статье CSS-препроцессоров (Sass, LESS и Stylus) обладает своим собственным, уникальным способом решения одной и той же задачи. Это дает в руки разработчика возможность выбора, каким способом выполнить поставленную задачу. Объединяет все препроцессоры способность расширить горизонты кодера с одновременным сохранением кросс-браузерности и чистоты кода.

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

    RxJs — map

    Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

    LESS — препроцессор CSS

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

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

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

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

    Возможности LESS

    Как уже упоминалось, с помощью LESS можно использовать в CSS переменные, занося в них значения свойств. Благодаря этому значение, повторяющееся в документе CSS, можно задать всего один раз, а затем использовать в различных участках кода по мере необходимости. При этом если возникнет необходимость изменить заданное значение свойства, сделать это придется всего 1 раз — изменив значение переменной.

    Чтобы в LESS задать ту или иную переменную, нужно перед ее названием записать символ @ («собачка»), а в качестве знака присваивания использовать двоеточие. В результирующем CSS-документе во всех местах, где будет использована в коде заданная переменная, она будет заменена соответствующим значением свойства.

    В качестве примера занесем в переменную @color цвет заголовков текста для обычной страницы HTML. Для этого в документ LESS запишем:

    В результирующем документе CSS в результате получим:

    Миксины или примеси

    Миксинами или примесями в LESS можно пользоваться для «примешивания» в одни наборы правил свойств из других наборов. Благодаря этому исчезает необходимость по несколько раз указывать одни и те же свойства, если они используются в разных наборах правил в CSS.

    К примеру, чтобы указать в наборе свойств для селектора a в идентификаторе menu свойства из класса bordered, LESS-код можно записать следующим образом:

    .bordered <
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    >
    #menu a <
    color: #111;
    .bordered;
    >

    В скомпилированном CSS-файле этот код примет такой вид:

    .bordered <
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    >
    #menu a <
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    >

    Функции и операции

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

    Для примера воспользуемся функциями и операциями в LESS, чтобы на основе заданного набора свойств получить 2 разных набора правил для «шапки» (header) и «подвала» (footer) страницы сайта:

    @the-border: 1px;
    @base-color: #111111;
    @red: #842210;

    #header <
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
    >
    #footer <
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
    >

    После обработки LESS-файла получим следующий код в скомпилированном CSS-документе:

    #header <
    color: #333333; /*цвет, полученный преобразованием цвета в переменной @base-color*/
    border-left: 1px; /*толщина границы равна значению, занесенному в переменную @the-border*/
    border-right: 2px; /*толщина границы равна удвоенному значению, занесенному в переменную @the-border*/
    >
    #footer <
    color: #114411; /*цвет, полученный смешиванием цвета в переменной @base-color и цвета #003300*/
    border-color: #7d2717; /*цвет, на 10% менее наcыщенный, чем цвет в переменной @red*/
    >

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

    Использовать LESS, как уже упоминалось, можно на стороне сервера или на стороне клиента, а также с помощью программ-конвертеров для прекомпиляции CSS-файлов на локальном ПК. Кроме того, возможно использование еще и онлайн-компиляторов LESS-кода для получения CSS-файлов или же для отработки навыков программирования в LESS (www.dopefly.com/less-converter, lesstester.com, less2css.org и др.).

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

    • подключить к страницам файл с расширением .less, в котором находится LESS-код, используя для этого такую конструкцию:
    • скачать с официального сайта проекта LESS специальный Javascript-файл less.js;
    • подключить к страницам less.js так же, как и любой другой Javascript-файл, т. е. используя конструкцию:

    При таком способе подключения при каждом обращении к страницам с подключенным LESS-файлом будет выполняться компиляция в CSS. В связи с этим предпочтительнее использовать на сайте заранее скомпилированные CSS-файлы, полученные с помощью программ для конвертирования LESS в CSS. К таким программам, в частности, относится приложение Winless для Windows, а также приложение LESS.app для MacOS. Для работы в этих приложениях достаточно загрузить заранее созданный в любом удобном редакторе файл LESS, а затем просто нажать кнопку «Компиляция» (Compile), чтобы получить готовый CSS-файл. При желании код в CSS-файле можно минифицировать.

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

    Используйте.LESS вместо компиляции в.css

    Просто интересно, каковы преимущества компиляции.less в.css с компиляторами, такими как Crunch или Prepros, а не напрямую с файлом.less? Не стоит ли полагаться на less.js-библиотеку, а.css может быть автономным? Я использую его для Twitter Bootstrap 3.

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

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

    Одним из таких примеров является конвейер Rails. Все преимущества, ни одна из слабых сторон. 🙂

    Топ-пост этого месяца:  Почему стоит использовать CSS фреймворки вместо Grid Layout плюсы и минусы
Добавить комментарий