Noveo

Наш блог LESSоповал

LESSоповал

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

image

Слово Косте:

Недавно я стал использовать LESS в своем проекте и хочу об этом рассказать.

О чем я расскажу в этом посте:

  1. Зачем нужен LESS.
  2. Как перейти на LESS.
  3. Как компилировать LESS с помощью Grunt.
  4. Как отлаживать LESS.

1. Зачем нужен LESS

Многие из нас работают с CSS :) Это бывает необходимо, но не всегда очень удобно и радостно, потому что:

  1. У нас есть CSS3, в котором есть классные штуки, но для поддержки которых в разных браузерах нам приходится писать одно и то же свойство с разными префиксами.
  2. У нас есть вложенность, которая в CSS мало наглядна.
  3. У нас есть желание переиспользовать стили, а не дублировать их каждый раз, или делать дополнительный класс и добавлять его в  разметку.

Но в наше время много хороших людей, благодаря которым разрабатывать – весело и интересно) Благодаря им у нас есть различные надстройки над CSS (например, http://lesscss.ru/http://sass-lang.com/guide), на которых можно писать красиво, скомпилировать в CSS и отдать браузеру.

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

2. Как перейти на LESS

Берем вышеприведенную ссылку по LESS (http://lesscss.ru/#docs), текущий CSS файл и начинаем методично оформлять его в *.less файл. Так делал я и чем больше переписывал, тем больше мне это нравилось) Я использовал:

  • Переменные (это удобно, когда у нас есть, например один цвет, который повторяется несколько раз и должен быть один и тот же).
  • Параметризированные примеси (например, для CSS3 параметров, таких как border-radius).
  • Вложенные правила.
  • Арифметические операции (когда есть зависимость одних параметров от других).
  • Импортирование (для декомпозиции).

Там есть еще классные штуки, например работа с цветом. Дополнительная плюшка в том, что современные IDE (проверял на PHPStorm) умеют делать автокомплит по LESS-переменным и функциям.

3. Как компилировать LESS с помощью Grunt

Итак, у нас есть .less файл (или набор таких файлов). Но браузеры пока мало что знают про LESS, поэтому надо им помочь. Для этого существуют разные способы. Для своего проекта я выбрал компиляцию LESS в CSS. Для этого я использую http://gruntjs.com/.  Он устанавливается как npm пакет, для этого вам понадобится NodeJS. Я ставил и запускал все на Ubuntu. Думаю, на других ОС должно работать аналогично.

Ставим:

npm install -g grunt-cli

И читаем http://gruntjs.com/getting-started

После установки нас интересуют 2 файла:

  • packages.json Помимо всего прочего, в этом файле собраны зависимости пакетов, которые можно установить с помощью npm install.
  • Gruntfile.js Служит для конфигурации различных grunt плагинов и запуска их работы. Для этого используется JS, запускаемый на NodeJS, поэтому там можно делать много всего, например, читать файлы и т.д.

Более подробное описание этих файлов можно найти в доке, приведенной выше.

После того, как Grunt успешно установлен, ставим плагин для компиляции LESS: https://github.com/gruntjs/grunt-contrib-less. Есть несколько плагинов, но я выбрал именно этот, потому что он поддерживает Source Maps, которые пригодятся нам при отладке. Итак,

Ставим:

npm install grunt-contrib-less --save-dev

Конфигурируем в Gruntfile.js

grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      less: {
            dist: {
                  files: {
                        'css/main.css': ['css/less/main.less']
                  },
                  options: {
                        compress: true,
                        cleancss: false,
                        sourceMap: true,
                        sourceMapFilename: 'css/main.css.map',
                        sourceMapRootpath: '/assets/',
                  }
            }
      }
});

grunt.loadNpmTasks('grunt-contrib-less'); // Compile LESS files to CSS.

По настройкам:

  • files – определяет что и куда компилировать;
  • sourceMap* – отвечают за генерации source map (объясню подробнее далее), чтобы все работало, нужно выставить cleanscss в false, иначе необходимая для работы source map информация будет удалена из результирующего css;
  • compress – если хотим еще и автоматически сжать наш файл.

Теперь мы можем запустить в командной строке grunt less, и получим наш CSS файл, который можно добавить на страницу.

Как отлаживать LESS

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

Вместе с main.css, наша grunt таска создала еще и main.css.map, который содержит информацию о связи CSS и LESS, а также добавилась ссылка на этот map в самом main.css:

/*# sourceMappingURL=/assets/css/main.css.map */

Теперь у браузера есть вся необходимая информация, чтобы связать CSS и LESS. И Chrome Dev Tools это уже умеет: http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/, раздел Setting Up Chrome.

В результате в Chrome Dev Tools теперь можно отлаживать сразу LESS:

Итого:

  • Это весело :) Описывать стили удобнее и фан от всего процесса увеличивается.
  • Использовать Grunt – удобно. Например, в своём проекте я настроил использование grunt-contrib-watch, который автоматически запускает компиляцию LESS, если какой-нибудь файл изменился. Также в этом плагине есть livereload, который позволяет автоматически перезагружать браузер при изменении CSS. В результате правим LESS в IDE, сохраняем файл, и через несколько секунд браузер уже сам обновляется и показывает последнюю версию системы. Я не рассказал об этом в посте, но если есть желание, могу подробнее осветить в другом. Есть еще куча других плагинов http://gruntjs.com/plugins.
  • Grunt – удобен, но есть риск подхватить “grunt головного мозга”. Будьте осторожны :)
  • Новых технологий сейчас много. И нужно пробовать использовать их в своей повседневной работе уже сейчас, не дожидаясь, пока это станет общепринятой практикой) Это реально и весело!

Спасибо за ваше время и внимание. Комментарии, вопросы – welcome!

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

НазадПредыдущий пост ВпередСледующий пост

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: