Компиляция Less в CSS

Для этого примера мы воспользуемся Less. Чтобы сделать то же самое для Sass вы можете использовать пакет grunt-contrib-compass. Вот наши настройки для компиляции Less-файлов. Как и в примере с минимизацией JavaScrip в параметрах определяются исходные и выходные файлы.

// Gruntfile.js
grunt.initConfig({

 ...
 
  // компиляция Less в CSS
  less: {
    build: {
      files: {
        'dist/css/pretty.css': 'src/css/pretty.less'
      }
    }
  }

});

В данном примере мы не устанавливаем какие-либо параметры, просто компилируем файл src/css/pretty.less в dist/css/pretty.css.

Для начала добавим немного Less в наш исходный файл.

/* src/css/pretty.less */

@red        : #CC594A;
@yellow     : #B8CC24;
@blue       : #8BC5FF;
@purple     : #6F3596;

body        { 
  background:@red;
  color:@yellow;
}

button      {
  background:@blue;
}

div         {
  background:@purple;
}

Мы определили несколько переменных Less и применили их к элементам. Теперь запустим нашу задачу!

$ grunt less

Создаётся файл dist/css/pretty.css содержащий результат компиляции Less в CSS и теперь он выглядит как обычный стилевой документ.

/* dist/css/pretty.css */

body {
  background: #cc594a;
  color: #b8cc24;
}
button {
  background: #8bc5ff;
}
div {
  background: #6f3596;
}

Давайте взглянем ещё на пару вещей, которые мы можем сделать с помощью Grunt.