長い間、CSSを書く時はSCSS記法のSASSと、SASSのフレームワーク「Compass」を使ってきた。
しかしプロジェクトが大きくなっていくにつれて、SASSのコンパイル速度が遅くなってきた。
今ではコンパイルにかかる時間はおよそ5秒ほどかかっている。
これでは仕事にならない。
そこで何か対策はないかと調べたところ、どうやらSASSにもRuby製やLibSass、DartSassなど、色々と種類があるようで、これまで使ってきたRuby製は既にサポートが打ち切られているようだ。
今もっともメジャーなのが「LibSass」とのことなので、自環境でも使えるように環境構築をしてみた。
LibSassの使い方
LibSassは素のままでは、ファイルを監視して変更があったらコンパイルする、というようなことができないので、Gulpを介してLibSassを使うことにした。
npm i gulp-sass --save-dev
gulpfile.jsの設定
SCSSファイル監視用のタスクを書いてみた。
const gulp = require('gulp'); const sass = require('gulp-sass'); const plumber = require("gulp-plumber"); const autoprefixer = require('gulp-autoprefixer'); //gulpコマンドの省略 const { watch, series, task, src, dest, parallel } = require('gulp'); //Sass task('sass', function() { return ( src('./sass/style.scss') .pipe(plumber()) .pipe(sass({ outputStyle: 'compressed' })) .pipe(autoprefixer({ overrideBrowserslist: [ 'ie >= 11' ] })) .pipe(dest('./css/')) ); }); //watch task('watch', (done) => { watch(['./sass/**/*.scss'], series('sass')); done(); });
gulpfile.jsを作成したら、タスクを実行してみよう。
gulp watch
監視状態に入り、SCSSファイルを保存すると自動的にコンパイルされるはずだ。
コンパイル速度も大幅に改善された。
Compassも合わせて使いたい場合
既存のファイルでCompassのライブラリを多用している場合など、Compass離れをすることで大幅なコード修正が入ることがある。
この場合、LibSassを使いながら、別の方法でCompassを利用することもできる。
まず、npmでCompassをインストールする。
npm i compass-mixins --save-dev
インストールが完了すると、node_modules/compass-mixinsというフォルダが作成される。
その中に「lib」というフォルダがあるので、これを作業ディレクトリへコピーする。
cp node_modules/compass-mixins/lib sass/lib
最後にSCSSファイル内のimport文のパスを修正する。
@import "compass"; @import "compass/reset"; ↓ @import "./lib/compass"; @import "./lib/compass/reset";
これで、Gulp + LibSass + Compassの環境が整った。
Gulpのタスクを実行すると、Ruby Compassでは5秒かかっていたコンパイルが1秒未満で完了した。