Stylus by 陳柏穎

Transcript

1. 1.

   易上⼿手的 CSS preprocessor Front-End Developers Taiwan Party - 5! DSL時代！把程式寫給⼈人看

2. 2.

   http://poying.me/ 陳柏穎 http://github.com/poying

3. 3.

   易上⼿手的 CSS preprocessor Stylus ❖ NodeJS! ❖ 可在瀏覽器上 compile! ❖

   仿 Sass
4. 4.

   特⾊色 ❖ 可使⽤用純 CSS 語法! ❖ “可”去除 {}! ❖ “可”去除

   ;! ❖ “可”去除 :! ❖ “少”強迫性的語法! ❖ Mixin / Transparent mixins! ❖ Block property access
5. 5.

   語法彈性 不會有適應新語法的過渡期! 基本語法可以適應我們的個⼈人偏好

6. 6.

   Stylus

7. 7.

   Sass

8. 8.

   不要強迫我 >< 在 sass 或 less 中不管是變數、︑mixin! 還是其他常⽤用的語法都會需要加⼀一些前綴 雖然⽴立意良好，但是被強迫的感覺真的不好 以

   sass 為例! 變數前⾯面加上 $ 可以很明確知道他是個變數! 但想換其他前綴呢︖？不能
9. 9.

   不要強迫我 >< 在 還是其他常⽤用的語法都會需要加⼀一些 雖然⽴立意良好，但是被強迫的感覺真的不好 以 sass 為例! 變數前⾯面加上 $

   可以很明確知道他是個變數! 但想換其他前綴呢︖？不能
10. 10.

    不要強迫我 >< 在 還是其他常⽤用的語法都會需要加⼀一些 雖然⽴立意良好，但是被強迫的感覺真的不好 以 sass 為例! 變數前⾯面加上 $

    可以很明確知道他是個變數! 但想換其他前綴呢︖？不能
11. 11.

    None
12. 12.

    Mixins 以更 “css” 的⽅方式來使⽤用 mixin! 這是 stlyus 的最⼤大賣點之⼀一

13. 13.

    Mixins 以更 “css” 的⽅方式來使⽤用 mixin! 這是 stlyus 的最⼤大賣點之⼀一

14. 14.

    None
15. 15.

    Block property access 另個 stylus 的殺⼿手級特點

16. 16.

    None
17. 17.

    Mixins + Block property access = 神器

18. 18.

    None
19. 19.

    其他功能 http://learnboost.github.io/stylus/docs

20. 20.

    限制 雖然有很多優點，但不能算是完美! ! stylus 考慮了很多基本語法上⾯面的彈性，! 對於⼀一般網⾴頁開發⽽而⾔言非常⽅方便，! 但對於過於複雜的事情處理的不是很好雜! 所以不適合拿來玩奇技淫巧

21. 21.

    None
22. 22.

    宿命 因為使⽤用 NodeJS 所以 NodeJS 本身的問題也會是 Stylus 的問題! 在 Watch

    部分 Stylus 無法知道有新檔案加入
23. 23.

    安裝、使⽤用 $ npm install -g stylus! $ stylus -w ./styl

    -o ./css
24. 24.

    None