はじめに

いつの間にか「アンテク技術ブログ」が公開されていたので、ﾎｴｰ、っと眺めていたら、 cssの拡張言語scssが面白くて便利だった(初級編) という記事がありまして、SCSSへの感動が溢れかえっており心を打たれたんですけど、はじめ方が割愛されていたので、せっかくだからワイが書くかと補足記事的に書くことにしました。

SCSSって何？

もともとは中括弧大嫌いなRuby界隈で爆誕した「インデント構文で書けるCSS」である、Sassというスタイルシート言語の拡張版です。セレクタをネストさせて書けたり、変数が使えたり、mix-inという機能で関数的に記述を使いまわせたり、それは大変便利なものなのでした。（どう便利なのかは cssの拡張言語scssが面白くて便利だった(初級編) を読んでください）

Sass自体はこれまたインデント記法で書けるHTMLテンプレート構文であるHamlの相棒みたいなもんです。（更にそれのJavascript版が謎にアンチの多いCoffeeScriptですね）
要はもともとは そうまでして死んでもブロック構文書きたくない というお気持ちが爆発している人たちのものでした。彼らの気持ちは大変よくわかります。。。

ですが、いかんせん インデント記法が非プログラマには敷居が高すぎる ということでSCSSが生まれました。というか、Sass側がライバル的なスタイルシート言語 LESS の構文をガツッとパクってきただけ、というのはあるのですが、これと Compass というCSSフレームワークの台頭によりSass勢は一気に利用者を増やすことになりました。

Compassが流行ったのはIEとFirefoxとSafariとChromeとOperaでそれぞれCSSの記述方法が微妙に違う（ベンダープレフィックスを付けないといけない）という地獄の時代があったからです。それについてはこちらの記事を読むといいでしょう。 今はベンダープレフィックスはいらないです。
CSSが超絶便利になる！Compassについてまとめてみた

始め方は2つある

Ruby on Rails以外ではSCSSはコンパイル（やってることはトランスパイルなんだけど）しないとCSSとして使えないので、そのコンパイラというのを入れるわけですが、実装はいくつかあるわけなのです。今回はよく使われているであろう2種類を紹介します。

• Rubyのsassというgemを使う
• Node.jsのnode-sassというパッケージを使う

Rubyのsassというgemを使う

RubyはMacだと最初からインストールされているのですが、Windowsだと自分で頑張ってインストールする必要があります。
https://www.ruby-lang.org/ja/downloads/

そしたらこのコマンドをターミナルで実行したら sass コマンドが使えるようになっています。
参考: https://rubygems.org/gems/sass

$ gem install sass

インストールできたら、ターミナルで以下のコマンドを実行するとSCSSをCSSに変換できるようになっているはずです。

$ sass [input.scss] [output.css]

細かいコマンドの使い方はこちらをご参照ください。
Ruby Sass Command-Line Interface

watchオプションとかは変更を自動検出してコンパイルしてくれるので便利ですよ！

Node.jsのnode-sassというパッケージを使う

Node.jsはMacでもWindowsでもインストールしないといけません。
まあ、でも難しくはないのでここからダウンロードしてきましょう。
https://nodejs.org/ja/download/

そしたらこのコマンドをターミナルで実行したら node-sass コマンドが使えるようになっています。
参考: https://www.npmjs.com/package/node-sass

$ npm install -g node-sass

インストールできたら、ターミナルで以下のコマンドを実行するとSCSSをCSSに変換できるようになっているはずです。

$ node-sass [input.scss] [output.css]

細かいコマンドの使い方はこちらをご参照ください。
Command Line Interface

watchオプションとかは変更を自動検出してコンパイルしてくれるので便利ですよ！（デジャヴュ）

エディタ側

エディタ側は色々あるのですが、PhpStormを入れれば特になんにもしなくても使えるので買うのが一番早く、生産性が高いと思われます。PHP使わないならお安い版のWebSrormというのもあるのでぜひご検討ください！
https://www.jetbrains.com/ja-jp/phpstorm/
https://www.jetbrains.com/ja-jp/webstorm/

VSCodeだと「Live Sass Compiler」というプラグイン入れたらそれで終わりのようですね。これ入れたらさっきのgem入れたりnode module入れたりすらいらなさそう。。。
VS CodeでScssを書くための環境構築方法