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
Stylus by 陳柏穎
Search
kvzhuang
February 18, 2014
Education
1
680
Stylus by 陳柏穎
kvzhuang
February 18, 2014
Tweet
Share
More Decks by kvzhuang
See All by kvzhuang
Immutable In JavaScript
kvzhuang
1
11k
F2E.tw in Developer Party 2014
kvzhuang
0
3k
人本設計 - by Akane Lee
kvzhuang
0
1k
JavaScript 程式設計
kvzhuang
0
120
My Pocket Monster
kvzhuang
0
55
CoffeeScript
kvzhuang
1
1.3k
Liferay Portal
kvzhuang
1
170
Introduction of TypeScript
kvzhuang
0
290
Other Decks in Education
See All in Education
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
バックオフィス組織にも「チームトポロジー」の考えが使えるかもしれない!!
masakiokuda
0
110
理想の英語力に一直線!最高効率な英語学習のすゝめ
logica0419
6
310
Info Session MSc Computer Science & MSc Applied Informatics
signer
PRO
0
190
(キラキラ)人事教育担当のつらみ~教育担当として知っておくポイント~
masakiokuda
0
120
2025年度春学期 統計学 第5回 分布をまとめるー記述統計量(平均・分散など) (2025. 5. 8)
akiraasano
PRO
0
190
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
460
質のよいアウトプットをできるようになるために~「読む・聞く、まとめる、言葉にする」を読んで~
amarelo_n24
0
110
20250625_なんでもCopilot 一年の振り返り
ponponmikankan
0
290
予習動画
takenawa
0
11k
サンキッズゾーン 春日井駅前 ご案内
sanyohomes
0
610
社外コミュニティと「学び」を考える
alchemy1115
2
170
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Thoughts on Productivity
jonyablonski
69
4.8k
Rails Girls Zürich Keynote
gr2m
95
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Designing for Performance
lara
610
69k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
How GitHub (no longer) Works
holman
314
140k
Adopting Sorbet at Scale
ufuk
77
9.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Scaling GitHub
holman
461
140k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
易上⼿手的 CSS preprocessor Front-End Developers Taiwan Party - 5! DSL時代!把程式寫給⼈人看
http://poying.me/ 陳柏穎 http://github.com/poying
易上⼿手的 CSS preprocessor Stylus ❖ NodeJS! ❖ 可在瀏覽器上 compile! ❖
仿 Sass
特⾊色 ❖ 可使⽤用純 CSS 語法! ❖ “可”去除 {}! ❖ “可”去除
;! ❖ “可”去除 :! ❖ “少”強迫性的語法! ❖ Mixin / Transparent mixins! ❖ Block property access
語法彈性 不會有適應新語法的過渡期! 基本語法可以適應我們的個⼈人偏好
Stylus
Sass
不要強迫我 >< 在 sass 或 less 中不管是變數、︑mixin! 還是其他常⽤用的語法都會需要加⼀一些前綴 雖然⽴立意良好,但是被強迫的感覺真的不好 以
sass 為例! 變數前⾯面加上 $ 可以很明確知道他是個變數! 但想換其他前綴呢︖?不能
不要強迫我 >< 在 還是其他常⽤用的語法都會需要加⼀一些 雖然⽴立意良好,但是被強迫的感覺真的不好 以 sass 為例! 變數前⾯面加上 $
可以很明確知道他是個變數! 但想換其他前綴呢︖?不能
不要強迫我 >< 在 還是其他常⽤用的語法都會需要加⼀一些 雖然⽴立意良好,但是被強迫的感覺真的不好 以 sass 為例! 變數前⾯面加上 $
可以很明確知道他是個變數! 但想換其他前綴呢︖?不能
None
Mixins 以更 “css” 的⽅方式來使⽤用 mixin! 這是 stlyus 的最⼤大賣點之⼀一
Mixins 以更 “css” 的⽅方式來使⽤用 mixin! 這是 stlyus 的最⼤大賣點之⼀一
None
Block property access 另個 stylus 的殺⼿手級特點
None
Mixins + Block property access = 神器
None
其他功能 http://learnboost.github.io/stylus/docs
限制 雖然有很多優點,但不能算是完美! ! stylus 考慮了很多基本語法上⾯面的彈性,! 對於⼀一般網⾴頁開發⽽而⾔言非常⽅方便,! 但對於過於複雜的事情處理的不是很好雜! 所以不適合拿來玩奇技淫巧
None
宿命 因為使⽤用 NodeJS 所以 NodeJS 本身的問題也會是 Stylus 的問題! 在 Watch
部分 Stylus 無法知道有新檔案加入
安裝、使⽤用 $ npm install -g stylus! $ stylus -w ./styl
-o ./css
None