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
670
Stylus by 陳柏穎
kvzhuang
February 18, 2014
Tweet
Share
More Decks by kvzhuang
See All by kvzhuang
Immutable In JavaScript
kvzhuang
1
10k
F2E.tw in Developer Party 2014
kvzhuang
0
2.9k
人本設計 - by Akane Lee
kvzhuang
0
1k
JavaScript 程式設計
kvzhuang
0
110
My Pocket Monster
kvzhuang
0
49
CoffeeScript
kvzhuang
1
1.2k
Liferay Portal
kvzhuang
1
140
Introduction of TypeScript
kvzhuang
0
280
Other Decks in Education
See All in Education
電子計算機のイロハ
kosugitti
1
1.5k
Qualtricsで相互作用実験する「SMARTRIQS」実践編
kscscr
0
230
240607_曲建仲_核融合成新顯學 創新技術將帶來全新方向
learnenergy2
0
170
Blogit opetuksessa
matleenalaakso
0
1.6k
week8@tcue2024
nonxxxizm
0
650
2024年度 サイバーエージェント新卒社内研修の「データモデリング」の資料公開
chiba_katsu
2
3.9k
自己紹介 / who-am-i
yasulab
2
3.9k
Zoom-ohjeet
matleenalaakso
7
7.1k
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.4k
大学院進学について(2024年度版)
imash
0
170
week6@tcue2024
nonxxxizm
0
610
みんなのコード2023年度活動報告・2024年度活動方針/Annual report2023
codeforeveryone
0
220
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
The Invisible Side of Design
smashingmag
296
50k
Side Projects
sachag
451
42k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Designing for Performance
lara
604
68k
GraphQLとの向き合い方2022年版
quramy
43
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
3.9k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Building Applications with DynamoDB
mza
90
6k
Facilitating Awesome Meetings
lara
49
6k
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