PostCSS 與 cssnext

Transcript

1. PostCSS 與 來自未來的 css PIXNET F2E tesm Julian
4. 10000 UP star
5. 什麼是 PostCSS “PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
7. 為什麼要用 PostCSS
8. •  Fast •  自己寫 plugin •  標準的 CSS 寫法 •  模組化 * Postcss – nested + postcss – simple – var + postcss – calc + postcss - mixins
9. 怎麼用 PostCSS
10. PostCSS 歷史 Rework (2012) Modular CSS preprocessing with rework TJ Holowaychuk hGps://github.com/reworkcss/rework
11. PostCSS 5 Sustom Syntaxes CSS-in-JS PostCSS-scss JS API sourceMap
12. •  Autoprefixer •  AtCSS •  PreCSS •  Stylelint •  cssnano •  cssnext …
13. •  Autoprefixer •  AtCSS •  PreCSS •  Stylelint •  cssnano •  cssnext …
14. •  Custom properties & var () •  Custom properties set & apply () •  Custom selectors •  Color funcQon
15. Custom properties
16. Custom properties set & apply()
17. Custom selectors
18. Color funcQon
19. It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use Andery Sitnik
20. Reference •  repository  https://github.com/reworkcss/rework •  官網 http://cssnext.io/ •  文章 http://huli.logdown.com/posts/262723-experiences-what-is-postcss https://www.ibm.com/developerworks/cn/web/1604-postcss-css/ http://www.zendei.com/article/11287.html http://www.w3cplus.com/blog/tags/516.html?page=1 •  簡報 https://speakerdeck.com/jmblog/postcss-tohahe-ka https://speakerdeck.com/liviamorim/descobrindo-o-futuro-do-css- com-cssnext https://speakerdeck.com/morishitter