はじめてのSass

なぜ書くのか

Springでいろいろとやっていくうちに、WebサイトのHTMLとCSSをたくさん書くようになった。
自由奔放にCSSを書いて、そのあとに『サイトのテーマカラー変えようぜ！』と言われると非常に困ることがあった。
たとえば

テーマカラーとしての青
決定ボタンとしての青
リンクの色の青

これが全部、同じ色のコードでスタイルの名前からは推測が難しい場合に一括置換できなくて泣きそうになる。
変えたいのはテーマカラーの青だけなのに、スタイルが意図しないところで使われてて、ほかのところも変わっちゃったり。

ほかにも、同じ部品用のスタイルがcssファイルに点在していて非常に見づらい。
点在しているはぐれスタイルを直し忘れて、つらい思いを日々している。
故郷のサーバーのサービスクラスのコードを書く仕事に帰りたい…

で、やりたいことが

色の定数定義がしたい
定数定義をスタイルで使って、色を変えたいときは、定義のコードを直すだけで、すべてのスタイルが適切に置き換わるようにしたい
同じ部品のスタイルは一か所にまとめたい
商品表示用のdivの配下につけるスタイルは、一か所にまとめて書く！みたいのを制限としてつけたい

でも、CSSでそんなことできるわけが…
それが、できるみたいなんですよ奥様。

SASS

なんかこれ、界隈では常識なのね。
CSSを直書きしていたのが、恥ずかしいわ。

sass-lang.com

上で書いたようなやりたいことが、このSassで出来るらしい。
CSSを便利に書けるようにしたSASSをコンパイルしてCSSにしてからHTMLに読み込ませるらしい。

やってみよう

SASSを書きたい
SCSSをCSSに変換するため、コンパイル環境が必要
コンパイル環境の作成にはnode-sassというものが必要(本当はRubyでやるのが公式っぽい)
node-sassを入れるためにパッケージ管理のnpmが必要
npmの動作にはnode.jsが必要

うーん、この、RPGのTODOを箇条書きにした感じ。
そして、ついにナウさの頂点であるWeb界隈に本格入門する時が来てしまったか…

歴史編

作業の前にイマイチ、npmとかnode.jsが何者かわからないので歴史の勉強。
歴史大事。
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita

読んだ感想：Web界隈、進歩が早すぎる
Java EEとかだと仕様をじっくりねっとり考えて、固めて、各ベンダーが実装。
さらに開発者が使えるようになって、システムに組み込まれて、世に出るには1～2年ぐらい遅延がある。

対して、Web界隈はナウさの頂点だけあって課題解決のためには使ってみて、ええやん！だったものが、
標準になって、さらにそれを元に進化していくみたいな感じなのね。
戦場で鍛えられた実践主義みたいな感じでカッコイイ。

環境構築編

↓の通りにやってみよう。
なぜならcmderをオススメし、使っている為だ。+100万点。
みんなも使おうcmder。
xn--web-oi9du9bc8tgu2a.com

node.jsのインストールとnpmの動作確認

node.jsは、Windowsの場合初期設定がいろいろ必要なようなので、そのままインストールせずにnodistというので入れるのが良いらしい。
PATHの管理とかめんどくさそうだもんね…

C:\Users\takeda
λ nodist -v
0.8.8

また、node.jsをいれるとnpmも使えるようになるとのこと。

C:\Users\takeda
λ nodist + v8.9.4

C:\Users\takeda
λ nodist v8.9.4
v8.9.4
Default global pacakge update dsuccessful.

C:\Users\takeda
λ node -v
v8.9.4

C:\Users\takeda
λ npm -v
4.0.5

おー、すばらしい。

node-sassをインストール

npmでnode-sassを入れます。

C:\Users\takeda
λ npm i -g node-sass

C:\Users\takeda
λ node-sass -v
node-sass       4.7.2   (Wrapper)       [JavaScript]
libsass         3.5.0.beta.2    (Sass Compiler) [C/C++]

ログを見る限り、C:\Program Files (x86)\Nodist\binの下にインストールされるみたいね。

Sass書いてみよう編

適当なディレクトリを作る。

C:\Users\takeda
λ mkdir mysass

んで、実際に書いてみましょう。
(ここまでが長すぎる)

$base-color: #666;

body {
  color: $base-color;
}

こんな感じで色とかの値を定義できる。
テーマカラーとかをこれで定義して使えば、今までよりは書き直しやすくなるだろう。

.shop-list {
  font-size: 18px;
  
  a {
    font-size: 14px;
    color: $link-color;
  }
}

こんな感じで、入れ子で一つのスタイルを定義できる。
これで一つの部品に対するスタイルは一か所にまとまるだろう。

コンパイルしてみよう

C:\Users\takeda\mysass
λ node-sass style.scss style.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\takeda\mysass\style.css

node-sass scssファイル名 cssファイル名 と指定して、コンパイルする。

出来たCSSを見に行こう。

んー、閉じかっこの位置が気に食わない。
でも、これが仕様らしい、まぁ確かにコンパイル後のコードって気にしないからどうでもいいか。
ちゃんと定義した値で置き換わってるし、入れ子にしたところは展開されている。
素晴らしい。

最後に

変更検知

実際に使うとなると、sassを変更して、いちいちコンパイルのコマンド打つのって大変。
このへんもちゃんと考えてあって変更検知用の設定もあるようだ。
node-sass style.scss style.css -w

僕にMacを買ってください

Windowsでnode.jsやろうとすると一工夫が必要。
多分ほかのツールにおいても、そうなのではないだろうか…
みんながMac使ってる理由がよくわかりました。

takeda_san’s blog

KotlinとVRを頑張っていく方向。