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
80
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.2k
Android CI: 2016 edition
gyugyu
3
2.4k
少し変わった論理削除
gyugyu
3
18k
Other Decks in Programming
See All in Programming
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
180
What's new in Spring Modulith?
olivergierke
1
160
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
310
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
300
CSC305 Lecture 08
javiergs
PRO
0
250
Software Architecture
hschwentner
6
2.3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
470
Swift Concurrency - 状態監視の罠
objectiveaudio
2
550
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
730
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Speed Design
sergeychernyshev
32
1.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Why Our Code Smells
bkeepers
PRO
340
57k
How STYLIGHT went responsive
nonsquared
100
5.8k
Code Reviewing Like a Champion
maltzj
526
40k
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 多分何かに使えるはず