夫婦でやってるWeb屋です。

2018-10-04

npm ライブラリをおさらい : node-sass のいろは

こんにちは、みみです。

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

前置き長くなりましたが、本命はこのひと。

node-sass – npm

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の波に飲まれてしまうのでしょうか…。って、これ「いろは」になっているかな?要は公式見ればよろし、って話ですね。

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter