Yet Another CSS Preprocessor #frontrendCSS

Aout me 4 ৿Լ խষ / Masaaki Morishita 4 twitter: @morishitter_ 4 github: morishitter 4 blog: http://morishitter.hatenablog.com 4 େֶӃ M2 4 4݄͔ΒαΠόʔΤʔδΣϯτʹೖࣾ

Concept of YACP CSSͷઃܭΛຊ࣭తʹྑ͘͢ΔͨΊͷϓϦϓϩη οα 4 طଘͷϓϦϓϩηοα͸ߏจ͕ؒҧͬͯͳ͚Ε ͹ԿͰ΋ίϯύΠϧ͢Δ 4 ίϯύΠϧΛݫͯ͘͠͠CSSͱطଘͷϓϦϓϩ ηοαͷόουϓϥΫςΟεͷ࢖༻Λ๷͙

Features of YACP 4 ϧʔϧηοτͷଋറ 4 ҆શͳ @extend 4 ৄࡉ౓ͷ౷Ұ

ϧʔϧηοτͷଋറ ಉҰηϨΫλʹΑΔϧʔϧηοτͷ࠶ఆٛΛېࢭ (.foo) { font-size: 12px; } .foo { /* Error */ font-size: 14px; }

҆શͳ @extend "҆શͳ" 4 ѱ͍@extendͷํ๏Λ๷͙ 4 ϓϨʔεϗϧμ(%)ηϨΫλΛڧ੍ 4 ܧঝݩͷϧʔϧηοτ͸ଋറ 4 ܧঝݩͷϧʔϧηοτ͕ڞ௨ͷϓϩύςΟ ΛؚΉ৔߹͸Τϥʔ

҆શͳ @extend %base-1 { font-size: 12px; padding: 8px 12px; } %base-2 { font-size: 14px; } .foo { /* Error */ extend: %base-1; extend: %base-2; }

ৄࡉ౓ͷ౷Ұ (Φϓγϣϯ) ΫϥεηϨΫλͱͦΕʹ෇ਵ͢ΔٖࣅηϨΫλҎ ֎Λېࢭ .class {} /* OK */ .class:hover {} /* OK */ #id {} /* NG */ p {} /* NG */ .class .nested {} /* NG */ .class { color: red !important; /* NG */ }

Object Oriented Design with YACP

ϧʔϧηοτͷΧϓηϧԽ (.text) { font-size: 12px; color: red; } .text { /* Error */ font-size: 14px; } .foo .text { /* Error */ color: blue; } ΧεέʔσΟϯάΛېࢭ

privateͳϧʔϧηοτ %base { font-size: 12px; } .foo { extend: %base; } %base { /* Error */ font-size: 14px; } privateͳ(্ॻ͖ෆՄೳͰ͔ͭYACPϑΝΠϧ಺ ͰͷΈࢀরՄೳ)ͳϧʔϧηοτΛఆٛͰ͖Δ

Single Class Design with YACP

ϚϧνΫϥεઃܭͷ໰୊఺ 1. ڞ௨͢ΔϓϩύςΟ্͕ॻ͖͞ΕΔ 2. ϧʔϧηοτؒͷ҉໧ͷґଘؔ܎ 4 ෼ް͍ελΠϧΨΠυ͕ඞཁʹͳΔ 3. Ϋϥε໊ͷηϚϯςΟοΫ͞(?)

γϯάϧΫϥεઃܭ %btn {} %btn-blue {} %btn-large {} .btn-next { extend: %btn; extend: %btn-blue; extend: %btn-large; }

YACP https://github.com/morishitter/YACP YACP: ΑΓΦϒδΣΫτࢦ޲ͳ CSSઃܭͷͨΊͷϓϦϓϩηοα http://morishitter.hatenablog.com/entry/ 2014/12/02/000135

Thanks :) @morishitter_