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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Object Oriented
    Design with YACP

    View Slide

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

    View Slide

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

    View Slide

  12. Single Class Design
    with YACP

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. Thanks :)
    @morishitter_

    View Slide