Добавление libsass

Sass и его порт libsass является ведущим препроцессором CSS и, безусловно, с наиболее богатым функционалом. Но есть одна вещь, которая выделяет libsass из ему подобных в сообществе JavaScript — то, что он не написан на JavaScript. Он на самом деле написан на C/C++. Таким образом, эта библиотека является портативной для любого языка, на котором может быть написана оболочка. На сегодняшний день самой популярной оболочкой является node-sass.

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

Для начала, давайте установим node-sass:

$ npm install --save node-sass

Это позволит установить оболочку Node для Sass и библиотеку libsass на C/C++. Далее, чтобы Grunt мог использовать библиотеку, мы должны добавить пакет Grunt-Sass.

$ npm install grunt-sass --save

Чтобы интегрировать всё это в проект, мы просто должны обновить Gruntfile.js.

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      dist: {
        files: {
          'public/stylesheets/style.css': 'sass/style.scss'
        }
      }
    }
  });
  
  grunt.loadNpmTasks('grunt-sass');
  grunt.registerTask('default', ['sass']);
};

Внутри объекта files указывается путь к выходному CSS, а затем путь к исходному SCSS-файлу.

Добавляем Sass

Чтобы заставить это работать, мы должны добавить папку sass и поместить в неё файл style.scss. В корне проекта:

$ mkdir sass

В папке sass:

$ touch style.scss

И добавьте следующий Sass, чтобы мы знали что это работает:

$color: orange;

body {
  background-color: $color;
}

Запуск Grunt

На данный момент мы готовы выполнить команду grunt и обработать Sass.