Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dart Sass であれを作った
Search
Yusuke Yagyu
July 28, 2020
Programming
0
77
Dart Sass であれを作った
2020.7.28 FukuokaJS #11 リモート開催
Yusuke Yagyu
July 28, 2020
Tweet
Share
More Decks by Yusuke Yagyu
See All by Yusuke Yagyu
ペパボのデザインシステムと、モバイル領域における取り組み
gyugyu
0
1.1k
Android CI: 2016 edition
gyugyu
3
2.3k
少し変わった論理削除
gyugyu
3
17k
Other Decks in Programming
See All in Programming
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
870
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
140
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
5.9k
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.1k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
0
130
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
1.8k
Azure AI Foundryのご紹介
qt_luigi
1
190
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.8k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
170
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Gamification - CAS2011
davidbonilla
80
5.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Language of Interfaces
destraynor
155
24k
GitHub's CSS Performance
jonrohan
1030
460k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
4 Signs Your Business is Dying
shpigford
182
22k
Making the Leap to Tech Lead
cromwellryan
133
9k
Visualization
eitanlees
146
15k
Docker and Python
trallard
43
3.2k
Bash Introduction
62gerente
610
210k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Transcript
Dart Sass であれを作った 2020.7.28 FukuokaJS #11 リモート開催 柳生 祐介 (gyugyu)
Dart Sass であれを作った 2 describe(me); const { name, company, department,
job } = me; console.log(name); // => 柳生 祐介 (gyugyu) console.log(company); // => GMO ペパボ株式会社 console.log(department); // => デザイン部 console.log(job); // => エンジニア
Dart Sass であれを作った 3 最近作ったもの • https://github.com/gyugyu/sassunit • https://github.com/gyugyu/array-map-sass •
https://github.com/gyugyu/camelize-sass
Dart Sass であれを作った 4 Sass new module system (2019.10-) •
Dart Sass のみ • `@use` `@forward` • 比較的まともなモジュールシステム ◦ 開放・閉鎖原則に比較的忠実
Dart Sass であれを作った 5 Dart Sass Dart を JS にトランスパイルしてそのまま使ってる
Dart Sass であれを作った 6 Sass JavaScript API https://sass-lang.com/documentation/js-api
Dart Sass であれを作った 7 Function Plugin • https://sass-lang.com/documentation/js-api#f unctions •
要は未定義の Sass function call に対して JS の世 界で実装できる ◦ 同期だけではなく非同期でもできる(!)
つまり JS でサポートすれば Sass でウェブアプリ作れる? 8
Dart Sass であれを作った 9 作った • https://github.com/gyugyu/sass-webapp • Express から全リクエストを
Sass にプロクシ • Request/Response アダプタの役割を果たす Sass function を定義
Dart Sass であれを作った 10 非同期 API があるので • JS 側で
async/await 必要な処理もできる • なので Redis ( DB なんでもいいけど)に値保存でき る • アクセスカウンターができる!
デモ 11
何かの役に立つんですか? 12
さあ…? 13 多分何かに使えるはず