【TODOリスト 第7回】SCSS、Bulma

引き続きTODOリストを作っていきます。

yushi-dev.hatenablog.com

生のCSSを書いていくのは辛いので、BulmaとSCSSを導入します。

SCSS

CSSの代替はSassかSCSSかと思いますが、僕はCSSに通じていないので、生のCSSもそのまま書けるSCSSを使ってみます。

Scssのcompilerは、一昔前（？）はnode-sassだった模様ですが、最近Deplecatedになったようですね。
代替のライブラリはなんとDart製です。

sass-lang.com

DartというとFlutterのイメージだったんですが、色々使われているんですね。

yarn add -D sass

ネストできたり、変数を使えたりという感じです。

- .item-wrapper > div,
- .item-wrapper > button {
-   height: 32px;
- }

+ .item-wrapper {
+   > div,
+   > button {
+     height: 32px;
+   }
+ }

Bulma 

CSSフレームワークを導入します。

有名どころは、例えばBootstarpですが、jQuery依存なので避けます。
BootstarpVueなど各JSフレームワークの移植版もありますが、実装が楽な一方JSフレームワークの置き換えができないのもあり、一長一短です。

というわけでCSS onlyのフレームワークで検討しました。有名どころは、

• Tailwind CSS
• Bulma

あたりかな、と思っています。

ただTailwindでは、公式ではModalとかない...ですよね？
Utility特化なイメージです（間違っていたらすみません）。

BulmaはHPの見栄えが可愛かったので、こちらにしました。

bulma.io

Before

After

まとめ

今回はフロントエンドに手を入れてみました。
CSSは特に経験の少ない分野なので、ゆっくり色々触ってみようと思っています。