Meguro.css#2でDart Sassをブラウザで動かす話をしてきた

terrierscript
Jul 28, 2018 · 6 min read

デモとソースはこちら

Demo
https://dart-sass-bootstrap-demo.netlify.com/ (その3)

Source
https://github.com/terrierscript/dartystrap/

Soruce (parcel-plugin)
https://github.com/terrierscript/parcel-plugin-darty

その1だけの簡素版もあったので貼っておく(こっちの方がさっくり動いている感がある)
https://dart-sass-browser-sample.netlify.com/
https://github.com/terrierscript/dart-sass-browser

ソースはアレな具合なところ多いがご勘弁願いたい。

Image for post
Image for post

本当は元々Bootstrap4のカスタムビルド的な話をしようと思って練っていたら色々転がってこんな感じのスライドになった。結果実用性がほとんど無くなっている。

アイスブレイク的に「みなさんSass嫌いかと思いますが」と言ってみたが意外とみんなに嫌われてないようだった。

(個人的にはnode-sassがインストール遅いし壊れるしでdart-sassに早く置き換われという気持ちとか変数とかもうcss variables使おうぜという気持ちとかReactとかVueでSass使われてるの見ると「いやそれコンポーネント設計見直すべきでは?」というパターンがわりとあるとか思うとか色々な気持ちがある)

あとは色々雑感などを書いていく

Sass関連

  • dart-sassのソースコードは割と読める。個人的にはGoっぽい感じだと思った。(パーサー周りまでは潜ってないけど・・・)

Parcel関連

  • うっかりparcelを触ってしまったが、感想としてはparcel最高に尽きる。

React関連

  • 最初デモとかlit-htmlとかでやろうとしたけどあまりに慣れずにあきらめてReact使う事にした。

配信関連

  • 最初CodeSandboxでデモ作っていたが、CodeSandboxの処理はどうも裏側にいるnodeがSSRっぽくやっている挙動していたので、今回の趣旨としてこれでは駄目だなとなった。気をつけないとハマるかも。

発表関連

  • なんだかんだでオープンな外部勉強会でLTやったのは初めてだった。まあ及第点ではないかと思う

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store