@importがしぬらしくて@useに変えてみた
はじめに
なぜこの記事を書いたかというとsassユーザーの大半はnode-sassユーザーなのでは…?と思ったからである。node-sassユーザー以外は見なくてもいいかもしれない。
今年5月に@importが段階的につかえなくなるよと勧告されはじめました。
https://sass-lang.com/blog/the-module-system-is-launched
結論からいくと、node-sassユーザーはきにしなくてとりあえずよい。
というかnode-sass側がまだ@useに対応していなく置き換えようがない。
https://github.com/sass/node-sass/issues/2886
@useとは
ざっくばらんにいうとjQueryなどでもはや懐かしいグローバル汚染をしないように、と
スコープを決められ名前空間をもたせれるシステム。
だと思ってくれて良いかもしれません。
@importが抱えていた問題、スコープがないため依存関係の把握が困難だったり、
いわゆる名前空間がないために書き手の創意工夫が求められてたりしました。それらを解決しようというのが@useの背景ですね。(たぶん)
node-sass側では対応するんか?
https://github.com/sass/node-sass/issues/2886
公式のissueでもあるように、議論にはあがっているのでロードマップに上がればサポートはされるはず。
以下とりあえず@useつかってみたい人向け
プロジェクトを作る
package.jsonができあがります。
yarn init
※yarn or npm はお好きな方で
sass入れる
(中身はdart-sassです)
yarn add sass
npm scriptsで実行するscriptをpackage.jsonに追加
script名は適当でいいです、unkoでも動きます。
ここではscss配下で作ったSCSSをdist配下にCSS出力してみます。
"scripts":{"scsscompile":"sass ./scss/style.scss ./dist/css/style.css"}
scssファイルを作る
touch ほにゃららでつくってもどっちでも。なんでもいいので作ります。
scss
├── _base.scss
└── style.scss
呼び出されたいscssファイルに以下の記述
ここでは変数だけを定義します。
$color:#000;
呼び出し側のscssファイルに以下を記述
@importではなく@useで呼び出し
こうすることで名前空間ができるので、どこで何をつかってるかがわかりやすくなる。
@use'./base'asclr;body{background:clr.$color;}
実行
yarn scsscompile
を実行すると
node-sassではエラーがでてトランスパイルされなかったCSSファイルがちゃんと生成されますね。
こんな感じでさして難しいことなく、移行はできそうです。
密接に絡み合ってるmixinやextendsなどがたくさんあるscssは移行しんどそうな気もします。
@forwardもあるのですが、それはまた今度書きたくなったらかいてみようかと。
今更だけれどSCSSなのかSASSなのか(ry