RSCSSとSASS(SASS記法)が良すぎる件

2020/08/25

少し時間ができたので、久しぶりにウェブの勉強をしようと思って、6、7年前からやろうやろうと思っていたSASSについて調べるついでに、この[frutto.co.jp]をコーディングし直した。やっぱり実際にコーディングしながらでないと覚えられないので。
しかしやってみると、記述方法や命名ルールが色々あって、コーディングしてみては、削除して違う命名ルールを試したりとスクラップ・アンド・ビルドを繰り返してしまい結構時間がかかってしまった。

SASSってなんだよ！

SASSとはCSSを楽に書けちゃうやつである。
しかしCSSとは異なり、そのままhtmlに読み込ませることができないので、コンパイルしなくてはいけない。
正直コンパイルとはよくわからないが、コンパイルするとSASSファイルがCSSになっちゃうので、htmlで読み込めるようになる。
エディターはAtomを使っているので、コンパイルはプラグインで自動でできるので、あまり深く考えなくてかった。最近のエディターってすごい。

SASSにはSASSとSCSSという2種類の記法がある

まずSASS = SASS or SCSSということを理解するのに時間がかかった。
SASSで検索すると、SCSSの記事ばかりでてくるのでSASSって言ってるのにSCSSってなんだよ！ってな感じで困った。
断片的に情報をつなぎ合わせてようやく、SASSにはSASSとSCSSという2種類の記述方法があることがわかった。

SASS

SASS記法:{}をつけない。拡張子は.sass
SCSS記法:{}をつける。cssと同じ。拡張子は.scss

{}がないSASSの方が格好いいし、キーを文字数も少ないので書くの早いじゃんという理由から、SASS記法を採用することにしたが、検索しても基本的にSCSS記法ばかりでてくる。どうやら圧倒的にSCSSが主流らしいが負けない。最初はまあ確かに{}がないので、違和感があるけれど、慣れてくると本当に{}を書くのが馬鹿らしくなるくらい爽快。
ネットの情報で見よう見まねでなんとなく書いてみて、一応覚え忘れがないかProgateで一通り勉強したが、CSSが書ければ意味はすぐにわかった。if文の使い時がよくわからなかったけど。
@mixinと変数を触ると、プログラミングってる…！ってなるのでとてもイイ。

【ズボンを脱ごう】SASSのSASS記法の魅力【カッコイイ】
「ズボンを履いていない」というのは言い得て妙である。本当に書いていてスースーする。

命名ルールを決めよう

でも命名ルールってなんだよ！

CSSのクラス名のルールは属人化しやすい。というか絶対なっちゃうので、それに明確なルールをつけようということである。
簡単にいえば、CSSを上書きしまる強引な記法は辞めようぜ！ってことである。

FLOCSSの導入

まず最初にFLOCSS(フロックス)にしようと思って見よう見まねで構築してみたものの、ComponentとProjectの明確な区別が全くわからなかった。わからないながらも、これはComponent、こっちはProject…とシコシコとコーディングしては、やっぱり昨日書いた部分はProjectじゃなくてComponent…という感じで、意味のないスクラップ・アンド・ビルドを繰り返す羽目に。。
完璧に区別がついてからでないと構築のしようがないと思って、区別の基準を調べてみたところ、やはり同じ様に悩んでいる人がいて解決策としては、その部分だけ社内特別ルールを適用！という感じだった。若干雲行きが怪しくなる。

FLOCSSを使ってCSSファイルを20,000行から9,000行にした話
 FLOCSSを使ったCSS設計での悩みどころと解決案

色々と調べるうちに、FLOCSSの元になったBEMやらOOCSSまで調べる羽目になったが、そもそもFLOCSSがこれらのいいとこ取りをした設計思想のため、どれもしっくりこない。もっと…もっと明確にルールで縛ってくれ…！と心が三日三晩叫びました。
その内に理解できるかもしれない、という淡い期待を胸にFLOCSSで組みつつも、他の方法も模索することに。もうこの時点でコーディングしているより、ComponetとProjectの明確な区別について調べている時間の方が長かった。

そしてRSCSSを発見

RSCSS(読み方不明)という考え方を発見。コンポーネント単位で.sassファイル(または.scss)を作成し、子要素で指定することで、クラス名被りを無くすというもの。以下のページが具体的でわかりやすかった。結局、実際に使ったらどういう感じになるのかっていう例が一番わかりやすい。

＿人人人人人人人人人人人＿
＞　これはゴイゴイスー！！　＜
￣^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

RSCSSとFlexboxを使ってまるっと１ページコーディングしてみた。

FLOCSSのようにルールで縛るというよりは、こうしたら便利っぽいというアイデアで少し緩い感じらしい。本当はルールで縛られたかったが、FLOCSSの命名に疲弊していたのでとりあえず試してみたところ、これがとても良くできていて結構感動した。今までCSSを書いてきた中で一番しっくりきて、半年後も問題なくメンテできる気がする！いいゾ〜！
最初は.sassファイルが増えまくるので、管理しきれるかな、、と感じたものの、コーディング中盤くらいから一度書いた部分の修正をする際に、該当のクラスを探すのが段違いに楽なのに気がついた。これ、マヂやっべーゾ…。

RSCSSとAtomで最強へ

コンパイルの方法

まずnode.jsなんかを色々インストールしないと動かない。思い返せば数年前に導入しようと思ったが、導入方法を紹介しているブログのコピペでインストールしているのに、どうにもエラーがでてしまいうまく行かなくて挫折したことを思い出した。
あまりスキルアップしていないので、今回も導入方法を紹介しているブログに載っているコードをコピペしてインストールしたがエラー！しかし今回は時間があったので、いくつかのブログをハシゴし、なんとか最後までコピペでインストールできるブログを発見し事なきを得た。

sass-autocompiledでコンパイル自動化

次にコンパイルをしないといけないのだが、調べてみると普段使っているエディターのAtomでプラグインを使用すると自動でコンパイルできるようだったのでインストールした。複数に分かれたどの.sassを保存しても自動で即座にコンパイルしてくれて、.sassファイルを置いている階層が違っても、最終的に指定した階層のstyle.cssにまとめてコンパイルしてくれるという代物。これも結構感動した。

Atomのsass-autocompileでSassのコンパイルをしてみよう

リアルタイムプレビューもつけてみる

AtomのBrowserPlusというプラグインをいれると、更にリアルタイムプレビューができるようになってしまう。捗ってしまう！！10数年前、Windows XPのメモ帳でひたすら打ち込んではブラウザの更新をひたすら繰り返していたのはなんだったのか。

BrowserPlus ~ Real Browser in ATOM!!

WordPressのソース汚い問題とRSCSS

WordPressは不要なクラスや、どこから生じているのかわからないインデントを吐き出してソースが凄い汚い。プラグインを使用すると、作者のつけた独自のクラス名が入るので命名ルールが破綻する。この場合の命名ルールはRSCSSであれば、そのプラグイン用に1つ.sassファイルを作ってやれば、他のファイルが汚染されないので、こんな時にもRSCSSは役にたった。しかもあくまでアイデアであり、ルールに縛ることが第一ではない考え方なので、「Wordpressの問題だから…」と自分に言い訳ができる。

総括

FLOCSSは検索するとそこそこの件数がでてくるので、それなりに大規模開発の場合は扱いやすいのかな〜？と思うものの、今回1人で構築した10ページ未満のサイトではRSCSSが使いやすかったしわかりやすかった。複数人で作業したとしても、「ここはどうするの？」ということがRSCSSの方が発生しにくいように思った。とりあえずRSCSSを今後も採用する予定。