Yet Another CSS Preprocessor

Frontrend Conference でのLT資料です。

YACP
https://github.com/morishitter/YACP
YACP: よりオブジェクト指向なCSS設計のためのCSSプリプロセッサ
http://morishitter.hatenablog.com/entry/2014/12/02/000135

Transcript

1. Yet Another CSS Preprocessor #frontrendCSS
2. Aout me 4 ৿Լ խষ / Masaaki Morishita 4 twitter: @morishitter_ 4 github: morishitter 4 blog: http://morishitter.hatenablog.com 4 େֶӃ M2 4 4݄͔ΒαΠόʔΤʔδΣϯτʹೖࣾ
3. Concept of YACP CSSͷઃܭΛຊ࣭తʹྑ͘͢ΔͨΊͷϓϦϓϩη οα 4 طଘͷϓϦϓϩηοα͸ߏจ͕ؒҧͬͯͳ͚Ε ͹ԿͰ΋ίϯύΠϧ͢Δ 4 ίϯύΠϧΛݫͯ͘͠͠CSSͱطଘͷϓϦϓϩ ηοαͷόουϓϥΫςΟεͷ࢖༻Λ๷͙
4. Features of YACP 4 ϧʔϧηοτͷଋറ 4 ҆શͳ @extend 4 ৄࡉ౓ͷ౷Ұ
5. ϧʔϧηοτͷଋറ ಉҰηϨΫλʹΑΔϧʔϧηοτͷ࠶ఆٛΛېࢭ (.foo) { font-size: 12px; } .foo { /* Error */ font-size: 14px; }
6. ҆શͳ @extend "҆શͳ" 4 ѱ͍@extendͷํ๏Λ๷͙ 4 ϓϨʔεϗϧμ(%)ηϨΫλΛڧ੍ 4 ܧঝݩͷϧʔϧηοτ͸ଋറ 4 ܧঝݩͷϧʔϧηοτ͕ڞ௨ͷϓϩύςΟ ΛؚΉ৔߹͸Τϥʔ
7. ҆શͳ @extend %base-1 { font-size: 12px; padding: 8px 12px; } %base-2 { font-size: 14px; } .foo { /* Error */ extend: %base-1; extend: %base-2; }
8. ৄࡉ౓ͷ౷Ұ (Φϓγϣϯ) ΫϥεηϨΫλͱͦΕʹ෇ਵ͢ΔٖࣅηϨΫλҎ ֎Λېࢭ .class {} /* OK */ .class:hover {} /* OK */ #id {} /* NG */ p {} /* NG */ .class .nested {} /* NG */ .class { color: red !important; /* NG */ }
9. Object Oriented Design with YACP
10. ϧʔϧηοτͷΧϓηϧԽ (.text) { font-size: 12px; color: red; } .text { /* Error */ font-size: 14px; } .foo .text { /* Error */ color: blue; } ΧεέʔσΟϯάΛېࢭ
11. privateͳϧʔϧηοτ %base { font-size: 12px; } .foo { extend: %base; } %base { /* Error */ font-size: 14px; } privateͳ(্ॻ͖ෆՄೳͰ͔ͭYACPϑΝΠϧ಺ ͰͷΈࢀরՄೳ)ͳϧʔϧηοτΛఆٛͰ͖Δ
12. Single Class Design with YACP
13. ϚϧνΫϥεઃܭͷ໰୊఺ 1. ڞ௨͢ΔϓϩύςΟ্͕ॻ͖͞ΕΔ 2. ϧʔϧηοτؒͷ҉໧ͷґଘؔ܎ 4 ෼ް͍ελΠϧΨΠυ͕ඞཁʹͳΔ 3. Ϋϥε໊ͷηϚϯςΟοΫ͞(?)
14. γϯάϧΫϥεઃܭ %btn {} %btn-blue {} %btn-large {} .btn-next { extend: %btn; extend: %btn-blue; extend: %btn-large; }
15. YACP https://github.com/morishitter/YACP YACP: ΑΓΦϒδΣΫτࢦ޲ͳ CSSઃܭͷͨΊͷϓϦϓϩηοα http://morishitter.hatenablog.com/entry/ 2014/12/02/000135
16. Thanks :) @morishitter_