Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Yet Another CSS Preprocessor

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

Masaaki Morishita

February 22, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

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_