Quantcast
Viewing all articles
Browse latest Browse all 8636

Sassの@useについて

@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ファイルに以下の記述

ここでは変数だけを定義します。

_base.scss
$color:#000;

呼び出し側のscssファイルに以下を記述

@importではなく@useで呼び出し
こうすることで名前空間ができるので、どこで何をつかってるかがわかりやすくなる。

style.scss
@use'./base'asclr;body{background:clr.$color;}

実行

yarn scsscompileを実行すると
node-sassではエラーがでてトランスパイルされなかったCSSファイルがちゃんと生成されますね。

こんな感じでさして難しいことなく、移行はできそうです。
密接に絡み合ってるmixinやextendsなどがたくさんあるscssは移行しんどそうな気もします。

@forwardもあるのですが、それはまた今度書きたくなったらかいてみようかと。

今更だけれどSCSSなのかSASSなのか(ry


Viewing all articles
Browse latest Browse all 8636

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>