2021/09/14

ツール

Sass

さいとう（くろ）

さようならLibSass、こんにちはDart Sass。

みなさんこんにちわ。リモート会議中に頻繁に猫に乱入されるさいとう（くろ）です。なぜ猫はPCと人間の間に入りたがるんでしょうか。

さて今日は表題のとおりSassのコンパイル環境について話をしたいと思います。

Sassとは？

本題に入る前に、まずSassとは何か？という話を簡単にします。

Sassとは、Webページのレイアウトや修飾情報の指定に用いられるCSS（Cascading Style Sheet）を生成するための言語（メタ言語）の一つ。また、同言語で記述したファイルをCSSファイルへ変換するソフトウェア。
出典： IT用語辞典 e-Words

ざっくり要約すると、「CSSをもっと便利で簡単に書くための拡張言語と、それをCSSに変換（コンパイル）するための実行環境」です。CSSでは使えないような計算式が使えたり、ループ文が書けたり、自作の関数を作れたりと、SassのおかげでCSSが効率的に書けるようになります。とても便利なヤツです。

さて、その便利なSassの実行環境は3つあります。

Ruby Sass
一番最初に作られたRubyベースののSassの実行環境。2019年3月に公式のサポートは終了していますが、1年くらい前に「使用率約10%」というアンケート結果を見かけたことがあるので、まだ使用している現場もそれなりにあるのかなと思います。
LibSass
まだまだ多くの現場で現役で使われているであろうC/C++ベースの実行環境。Node環境でよく使われているnode-sassはLibSassをベースに作られているので、LibSassだと意識せずに使っている人もいるかもしれません。
Dart Sass
Dart言語で書かれた最新の実行環境。現在の公式推奨環境で、今後廃止予定の @import の代替となる @use や @forwordが唯一使える環境です。

“LibSass is Deprecated”

さて、そんなSass環境ですが、現在LibSassは非推奨となっています。

もともと @importが段階的に廃止となるという話もあり、公式としてはLibSassではなくDart Sassを使うことを推奨している、ということは数年前から言われていました。そういった中で、2020年10月に唐突にLibSassが非推奨となりました。

公式サイトにも書かれていますが、非推奨となったからといって使用できなくなるわけではなく、メンテナンスリリースなどは続いています。とはいえ、新しいCSSの記述方法などへの対応や、新機能の追加などはなくなるため、将来的にはDart Sassへの移行が必要となります。

アトラスでも多くのプロダクトでLibSass（node-sass）を使用しており、Dart Sassへの移行が必要となりました。

さようなら LibSass

というわけで、実際の移行手順についての話をしていきたいと思います……が、これはあくまでアトラスでの移行方法のご紹介となります。公式サイトでも移行方法が案内されていたり、他のサイトでも紹介されていたりするので、移行検討中の方は自分の環境に合わせた方法をご利用ください。

脱node-sassする

現状アトラスの開発環境ではGulpを使ってSassを動かしているものがほとんどです。GulpでSassを使用するためにgulp-sassを使っていますが、これはもともと node-sassを使用してコンパイルするような仕組みでした。現在はgulp-sass でもDart Sassのサポートがされているので設定次第で使えるのですが、Node.jsのバージョンによってはgulp-sassが使えない（付随するnode-sassがインストールできなくてエラーになる）などの問題が過去にあったようなので、アトラスでは gulp-sassではなくDart Sassに対応した gulp-dart-sassを使うことにしました。

gulp-dart-sassの導入

というわけで早速インストールします。プロダクトのディレクトリ配下で以下のコマンドを実行するとインストールされます。オプションは環境にあわせて変更してください。

npm install gulp-dart-sass --save-dev

1	npm install gulp-dart-sass --save-dev

無事インストールされたら、次はgulpfile.js を書き換えます。

"use strict";

const gulp = require('gulp');
const sass = require('gulp-dart-sass');

const config = {
    path: {
        sass: {
            src: './src/sass/*.scss',
            dest: './css/'
        }
    }
};

function style() {
    return gulp.src(config.path.sass.src)
        .pipe(sass({
            outputStyle: 'compressed',
        }))
        .pipe(gulp.dest(config.path.sass.dest));
}

exports.default = function() {
  gulp.watch(config.path.sass.src, style);
}

"use strict";

const gulp = require('gulp');

const sass = require('gulp-dart-sass');

const config = {

path: {

sass: {

src: './src/sass/*.scss',

dest: './css/'

}

};

function style() {

return gulp.src(config.path.sass.src)

.pipe(sass({

outputStyle: 'compressed',

}))

.pipe(gulp.dest(config.path.sass.dest));

}

exports.default = function() {

gulp.watch(config.path.sass.src, style);

}

※記事公開時はサンプルファイルの記述方法がGulp 3.xx系のものになっていましたが、4.xx系に書き換えました（2021/9/16 追記)

もともと
const sass = require('gulp-sass');
としていたところを、 gulp-dart-sass に書き換えるだけでOKです。とても簡単です。

こんにちはDart Sass

そんなわけで無事LibSassとさようならしてDart Sassをお迎えすることが出来ましたが、実はこれで終わりではありません。

これまでも何度か言及していますが、@importなど今まで使えていたSassの記法や関数が2022年に廃止されることが決まっています。そのため、今まで作成したSassを新環境に適した記法に修正していく必要があります。これはそれなりに影響範囲が広いため、アトラスでは段階的に対応していく予定です。そちらについてもまた別途記事にしていきたいと思います。

まとめ

システムは一度作って終わり！ではなく、そのシステムが動く環境……関連するソフトウェアやミドルウェア、ハードウェアなどの継続的なメンテナンスが必要になります。たまに「古いソフトウェアを動かすためにもうサポートが終了したPCを使っている」という話を聞くことがあります。確かにその方法でもなんとか使い続けることはできますが、PCが壊れたりすれば使えなくなってしまいますし、一時しのぎにしかなりません。

LibSassは今でも使えますし、古い環境のままであれば使い続けることも可能だと思いますが、いつどのタイミングで動かなくなるかはわかりません。手遅れになる前に、定期的に環境を見直してメンテナンスや整備をしなおす、というのはサービスの安定稼働や継続のために大切なことです。

IT業界、特にWeb界隈はサービスのサイクルが早く、使用する技術やツールもどんどん変わっていきます。最新情報をキャッチアップするだけでも一苦労ですが、きちんと情報を収集して対応していきたいと思います。

カテゴリ

キーワード

メンバー