こちらの記事はもう情報が古いです。node-sassを検討している方はnode-sass(LibSass)からsass(DartSass)への移行を参考にしてくださいませ。
こんにちは、みみです。
2回目のおさらいは、みんな大好き?Sass についてです。
最近の Sass 事情
CSS の痒い処に手が届きまくってしまうSass のコンパイラは、CSSという利用者の範囲がめっちゃ広い言語という性質上、GUIも昔から結構色々でてます。
10 Best Tools to Compile SASS, LESS, and Stylus – CSS Preprocessors
Compass は私も使っていましたし、調べてみたらまた色々出てるんですね。
VS Code でも Live Sass Compiler – Visual Studio Marketplace ていうめっちゃ便利そうな拡張が出ていました。
あとオンラインで書ける Online SCSS Compiler – BeautifyTools.com とかも便利かも。ちょっとのテストコードでも素のCSSがかったるくて書けなくなった Sass ユーザー(私)に福音。え、この beautifytools.com すごくない?大好きだわ。
本命は node-sass
前置き長くなりましたが、本命はこのひと。
C で書かれた libSass を Node.js にもってきたライブラリ(だと思う)。人気の理由は速さ、なのか? Dart Sass の人はうちのほうがちょっと早いよって言ってるけど。dart sass vs node sass とかでググると喧々諤々ぶりが分かるので、まあもう少ししたら決着がつくのではなかろうか。Sass に飽き飽きしているアーリー某は、PostCss とかもあるので頑張ってください。私は決着が付いてから()動くことにします。
使い方
下の方にある、コマンドラインな使い方を参照。
node-sass --output-style expanded --indent-width 4 src/style.scss dist/style.css
とすると、良く見るフォーマットなCSSが出力されます。デフォルトは nested
でインデントが 2
です。タブ派の人は --indent-type tab
を。
そういえば私はタブ派だったのだけど、旦那さんがスペース派って事に結婚後暫くしてから気がついて、…ぅぇええええ?!てなったことがあります。自他共に認めるめちゃくちゃ温厚な旦那さんが1ミリも譲らなかったのも、なかなか根が深い問題だと思いました。うちは宗教よりも愛が勝ったけどもな!私が似非スペース派(タブで書くけどスペースに変換)に転向してあげたけどな!
さらに、-w
と追記するだけで、ウォッチしてくれるのが好きなところ。minifyもお手のもの。最近は nodemon 使ってるけど、sassのことならnode-sassだけで完結出来るのすてきよね。
ソースマップ、私使ってなかったけれど、自作のコードも煩雑になってきたので、そろそろ使ってみようかなあ。って思ったのけれど、postcss 通して残すのどうやるんだろうなってなって保留のまんまでした。普通に出力しても多分、postcss に上書きされちゃうぽい。postcssのおさらいの時の宿題にしよう…。
ああ、こうやって人はPostCssの波に飲まれてしまうのでしょうか…。って、これ「いろは」になっているかな?要は公式見ればよろし、って話ですね。