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
52
CoffeeScript
kvzhuang
1
1.3k
Liferay Portal
kvzhuang
1
150
Introduction of TypeScript
kvzhuang
0
290
Other Decks in Education
See All in Education
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
Gesture-based Interaction - Lecture 6 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
AIの時代こそ、考える知的学習術
yum3
2
140
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
190
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
470
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
210
第1回大学院理工学系説明会|東京科学大学(Science Tokyo)
sciencetokyo
PRO
0
3.6k
家族をスクラムチームに! アジャイルで取り組む家事と育児 | Install Scrum to Family
coosuke
PRO
1
290
OpenSourceSummitJapanを運営してみた話
kujiraitakahiro
0
380
郷土教育モデル事業(香川県小豆島町).pdf
bandg
0
170
横浜翠嵐高校 職業講話 / Talk for YOKOHAMA SUIRAN 2024
mura_mi
0
200
社外コミュニティと「学び」を考える
alchemy1115
2
150
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The Language of Interfaces
destraynor
158
25k
How GitHub (no longer) Works
holman
314
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Thoughts on Productivity
jonyablonski
69
4.7k
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