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
160
Introduction of TypeScript
kvzhuang
0
290
Other Decks in Education
See All in Education
2025年度春学期 統計学 第10回 分布の推測とは ー 標本調査,度数分布と確率分布 (2025. 6. 12)
akiraasano
PRO
0
200
データ分析
takenawa
0
9.3k
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.8k
2025年度春学期 統計学 第8回 演習(1) 問題に対する答案の書き方(講義前配付用) (2025. 5. 29)
akiraasano
PRO
0
120
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
160
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
240
ふりかえり研修2025
pokotyamu
0
1.3k
予習動画
takenawa
0
9.9k
マネジメント「される側」 こそ覚悟を決めろ
nao_randd
10
5.4k
2025年度春学期 統計学 第13回 不確かな測定の不確かさを測る ー 不偏分散とt分布 (2025. 7. 3)
akiraasano
PRO
0
100
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Why Our Code Smells
bkeepers
PRO
337
57k
Designing Experiences People Love
moore
142
24k
The Cult of Friendly URLs
andyhume
79
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Visualization
eitanlees
146
16k
4 Signs Your Business is Dying
shpigford
184
22k
Docker and Python
trallard
45
3.5k
Making Projects Easy
brettharned
116
6.3k
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