LibSassとは

LibSassはSassプリプロセッサ実装の一つで、C/C++で実装されています。Rubyで実装されたRuby Sassとは異なり、コンパイルが高速であるという特徴を持ちます。ver3.3以降 Ruby Sassとの完全互換となったため、LibSassのシェアは増えつつあるようです。

LibSassのインストール

今回はNode.js上で動作するLibSassであるnode-sassをインストールします。

動作環境はMac OS X High Sierraです。
Homebrewでのインストールを前提とします。

まずはNode.jsをインストールします。

$ brew install node
$ node -v
v8.9.0

Node.jsをインストールするとNode環境上のパッケージマネージャであるnpmもインストールされています。

次はこのnpmを使って、タスクランナーgulpをインストールします。gulpはSassコンパイルなどの手続きを自動化するツールです。

$ npm install --global gulp-cli
$ gulp -v
[00:22:50]CLI version 2.0.1

(グローバルオプションは、インストールしたコマンドを全ディレクトリで使用可能にするオプションです)

次にSassを導入します。
まずはパッケージを導入するディレクトリを用意。

$ mkdir sass_sample
$ cd sass_sample

次に同ディレクトリ配下に以下のpackage.jsonファイルを作成し、npm installを実行すると、パッケージがインストールできます。

# package.jsonを生成
$ npm init -y
$ npm install --save-dev gulp
$ npm install --save-dev gulp-sass

package.json

{
  "name": "sass_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^4.0.1"
  }
}

これでSassがインストールできました！

$ ls node_modules | grep node-sass
node-sass/

Sassの実行

npm経由でインストールしたgulpコマンドを使ってコンパイルを実行できます。

以下のsassファイルとgulpfile.jsを保存し、gulp sassを実行。

$ cat test.scss 
#test{
    width: 300px;
    height: 500px;
    p {
        em {
            color: #ff00ff;
        }
    }
}

$ cat gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
  return gulp.src('./*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

# Sassコンパイル
$ gulp sass

# CSS生成
$ ls css
test.css

test.css

#test {
  width: 300px;
  height: 500px;
}

#test p em {
  color: #ff00ff;
}

うまく生成できました。

参考文献

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Ren's blog

@rennnosuke_rk 技術ブログです

【Sass】LibSassを導入する