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

CSS 檔案管理技巧分享

evenwu
May 26, 2014

CSS 檔案管理技巧分享

evenwu

May 26, 2014
Tweet

More Decks by evenwu

Other Decks in Design

Transcript

  1. $44ᗆᐵⅷᱝု೼Ձ̅
    &WFO8V
    ⊮⽶˼ം⋏ࢣΒᴡ4$44ḓ̍

    View full-size slide

  2. &WFO8V
    FWFOEFTJHOUX࿞㍫ⰬⰕؽ⽽ς

    View full-size slide

  3. RGBA_
    GCDPNHSPVQTPQFOSHCB
    ⎛㔄ⰬⰕ┣ᐆ

    View full-size slide

  4. $44ᗆᐵⅷᱝု೼Ձ̅
    όઘỉ㔹Ἅ㒔෤ㄒ⯁㦎ႴϞ႕ᷗ౲‶੷Ⲣጊỉ໶စю᥇
    Ԇ㦎Κಙ፽έҠಉᎇأႾ㍱ଁ౲ɘ
    Ͻᴡඈ≧ᑢ

    View full-size slide

  5. ᵕ࿠ϯ୬ፑˮ$44
    ΍໏ⱜ༢㣉⽽㦖ఢ4$44㏋㦃
    ⼑ै௣ᵓৡ஖⾳ፐ4$44˯

    View full-size slide

  6. ᩬบᵕᩬወ
    ฐ࿊ḕቶځḏ௽
    Κಙ፽႕ҥ⯁ᐊॏ㏿⯋∺ɗ☱ٳڠᡢℨɘ

    View full-size slide

  7. ඼⃳࢙㋢㞽৸
    $444UZMF(VJEF
    DMBTTބܳ۱؞ɗಂᓪៈ⇾

    View full-size slide

  8. ΒᴡӰ⼒ḓ⯇⭜٪̩֦๘࢚㋠ᢗ⼒⼗൹㡩ᴘ▀՛ʵᴡᢗ⼒ḓ⁲൹Ƣ

    View full-size slide

  9. ௌᐵՏੋת
    ཉ⊂жյ̶஡ᾢ㏢௘̷

    View full-size slide

  10. ࿟ϰ⶚ஈ࿸⭤⯮XJSFGSBNFḓ⼳⁲
    ௑˯㡩ፔᝧ༨՛⽶ᑦ≟⌂㌯௉޺㡱

    View full-size slide

  11. ⼑᎝⬌٪̩Ⲅᬝʲḓ"≳⳵ⵏΙⵘቄ㠐9%%%%

    View full-size slide

  12. ٢ʬϫஈ࿸ḓဇₓ

    View full-size slide

  13. ஈ࿸௽᱔Ի̨̍㕋⭯ḓʳၢ⽔ޣֈ༨㡬XJSFGSBNFʲӼΒᴡθ՘⳵㡞

    View full-size slide

  14. ө⾢⭤⯮XJSFGSBNFน㡩ၟՂᨡٶ₉DPNQPOFOUḓ⭤⯮θᑦ≳Ƣ

    View full-size slide

  15. ՘ᴡIBDLQBE㡩ⵘᒉḓؔ͵ቔ̳ൗ٫

    View full-size slide

  16. ৡ▁༏ਔʬ˼DPNQPOFOUӐ̳˘น
    ௣㉒ੋΒᴡIBDLQBEΙ஼⼑˼DPNQPOFOUḓDMBTTOBNF⮨ਙͮۏپ
    ᴪௌᐴٹ͵␻ʬⵏΙ஼
    ⬛໮ᝆፐⲄQSPKFDUNBOBHFS CBDLFOE˥ʬⵏ֦Ө

    View full-size slide

  17. ʬ˼Ӱ⼒Ӽ˥ʵ⼳ḓ᎝⬌㡩௣ʵ⬍ʬӼӼ⭤⯮˯㡩⬗஄ʳΙړƢ
    ፔቯ̍Ι˥ตਔʲဇ㡞

    View full-size slide

  18. ඼⃳ௌᐵ$44Ꮟᕃ
    ࢹ῰Τ⿅㣉Ί㦎ⱜٳႽΤ݈㦖

    View full-size slide

  19. ٍ␻˱
    َ␹ৡ῿ḓ⳿ቝ࿟⬲พ.7$44዇᚜4."$44⽠⬍ፆਔḓↄΝ㡞

    View full-size slide

  20. ඼⃳
    Ө⾤ௌᐵᏏᕃቕ̲

    View full-size slide

  21. Ö BMM
    Ö @DPMPST
    Ö @NJYJOTPS@NPEVMFT
    Ö @UZQPHSBQIZ
    Ö @GPSN JOQVU TFMFDU CVUUPO×

    Ö @MBZPVU
    Ö QBSUJBMT ⋧⃷ӯ⼔ӏ̲

    Ö QBHFT ϪՔ㏧㍻ḕᭃᙨჰᬡ

    ʬϫजῄḓ4$44ᗅᐴⅵᱛᏎᕂৡᔊ௣዇⼑ᕾ

    View full-size slide

  22. ṏぢ

    Ϊʳټ⾤̲Ɵ֤ⓛ
    ၠՁTDTTᗆᐵ
    ͡Ҡᙻᓪಂ᠝Ъ͡ϨΦ

    View full-size slide

  23. BMMTDTT
    × GSBNFXPSLٌቆ
    × JNQPSUṞ㊉Αᴟ˗GSBNFXPSL
    × JNQPSUSFTFUOPSNBMJ[F
    × JNQPSUDPSFTDTT DPMPS NJYJO UZQPHSBQIZ MBZPVU

    × JNQPSUQBSUJBMT
    × JNQPSUQBHFT
    × Ӱ̜चῂ೸ӱ

    View full-size slide

  24. @DPMPSTTDTT
    × च፭㐙◜ⱻቆ㡠፭⃳ᴟḑ㞲◜ƠḌ◜Ơ≝◜Ơொఋ܂ᬡ◜℻㡡
    × च፭㐙◜⭴ஂ㡠CPEZƠCBDLHSPVOEƠMBZPVU㡡
    × ⋣⃳ӎ̲㐙◜⭴ஂ㡠DPNQPOFOUƠMJLFUBCƠWJEFPQMBZFSƠ㡡

    View full-size slide

  25. @DPMPSTTDTT
    基本顏⾊色變數
    基本
    顏⾊色
    元件
    元件細節
    body
    component

    View full-size slide

  26. @NJYJOTTDTT
    × ሡNJYJO௡௏ˮ
    × ༦ۄ⼍⽡ʴፎᴜᴚவ㋩ḑDTTDPEF
    × ொ㉈⊬Ӱ̜ᗃᐲ!JODMVEFᴟḑ

    View full-size slide

  27. @UZQPHSBQIZTDTT
    × JNQPSU୕㕲
    × CPEZ୕㕲⭴ஂ
    × \IFBEJOHT
    ^୕㕲⭴ஂ
    × ٴՓIÍI୕㕲⭴ஂ
    × ٴ₇ቒ፭IUNM⭴ஂQ JNH PM VM CMPDLRVPUF QSF DPEFØ

    View full-size slide

  28. @MBZPVUTDTT
    × ৠƠࢨIFBEFSƠGPPUFSƠDPOUBJOFS
    × च፭ჭᬝHSJETFUUJOH
    × च፭3FTQPOTJWFMBZPVU
    × ਗᎿዅ0GG$BOWBTˤࢡ⼍⭴ஂ

    ࡺ᨟⼍₇NFOV㉎㊉ᖤ՞ⶖMBZPVU⋀ḑณ⋸

    View full-size slide

  29. ⬙ↆ

    ௣٤ወϪ⬙ↆ⑁ം
    ಂᓪ፽ᡜỉ㦃

    View full-size slide

  30. ௌᐵፕൡ₋
    × ஀ታ⋣⃳

    ἤ⭠ፎ ʫ▪ӫٯ
    × ⪭㌚ḑᴜ܂஀ታ⋣⃳

    4FSWJDF̗⊈
    × ӧ஖⋣⃳

    CMPHƠ⋣ⶤ㌚⮸
    × ⋣ⶤݗ൮Ơ⯪ধƠ
    8FC"QQ

    View full-size slide

  31. ▔ΜΘ⯒㡮

    View full-size slide

  32. 1VGGJO
    CSPXTFS
    EFNP
    !! /!
    !! !"" _baseline.scss!
    !! !"" _footer.scss!
    !! !"" _layout-debug.scss!
    !! !"" _layout.scss!
    !! !"" _top-bar.scss!
    !! !"" _typography.scss!
    !! !"" all.scss!
    !! !"" pages!
    !! # !"" _about.scss!
    !! # !"" …!
    !! # $"" _news.scss!
    !! $"" partials!
    !! !"" _article.scss!
    !! $"" _feature-list-tabs.scss

    View full-size slide

  33. 3PPMFO
    EFNP
    !! /!
    !! !"" _baseline.scss!
    !! !"" _color.scss!
    !! !"" _layout.scss!
    !! !"" _page.scss!
    !! !"" all.scss!
    !! !"" basic!
    !! # !"" _alert.scss!
    !! # !"" …!
    !! # $"" _typography.scss!
    !! !"" page!
    !! # !"" _about.scss!
    !! # !"" …!
    !! # !"" _support.scss!
    !! # $"" home!
    !! # !"" _capacity.scss!
    !! # !"" …!
    !! # $"" _three-way.scss!
    !! $"" partials!
    !! !"" _block.scss!
    !! !"" _carousel.scss!
    !! !"" _footer.scss!
    !! $"" _header.scss!

    View full-size slide

  34. ࢒ፑ᩠㌝
    EFNP
    !! /!
    !! !"" _common.scss!
    !! !"" _layout.scss!
    !! !"" _normalize.scss!
    !! !"" _page-adjustment.scss!
    !! !"" _partials.scss!
    !! !"" _typography.scss!
    !! !"" _variables.scss!
    !! !"" all.scss!
    !! !"" basic!
    !! # !"" _basic.scss!
    !! # !"" _typography.scss!
    !! # !"" debug!
    !! # # $"" _layout-debug.scss!
    !! # $"" typography!
    !! # $"" _baseline.scss!
    !! !"" pages!
    !! # $"" _index.scss!
    !! $"" partials!
    !! !"" _article.scss!
    !! !"" …!
    !! $"" _video.scss

    View full-size slide

  35. ፕʪϪTDTTᗆᐵⵚ⼵⨲

    ௣⮪だᕃ͸ḕTDTT
    ⼑١⮧ਔѹ዇࿟⯐ḓ㡱

    ُ͡๳዇˘ծࢣܜ⪘Ṯ՛

    ⽠዇Ꮳৡ῿⯐ḓ㡩ኑᩪਙᙒ

    View full-size slide

  36. ☰ፕʪϪTDTTᗆᐵⵚ⼵⨲㡫

    ௣⮪だᕃ͸ḕTDTT
    ፕᜩፕ㡠
    ⯒ፙ֣㕼৛ˮ

    View full-size slide

  37. ᩠㊺፥2"
    GCDPNHSPVQTPQFOSHCB
    GCDPNFWFOXV

    View full-size slide