Pro Yearly is on sale from $80 to $50! »

PostCSSを導入してみた話と プラグインいろいろ

7e56a691cfb413e0f6e631791f33fe54?s=47 misumi
October 29, 2016

PostCSSを導入してみた話と プラグインいろいろ

CSS Talk vol.1での発表資料です。

7e56a691cfb413e0f6e631791f33fe54?s=128

misumi

October 29, 2016
Tweet

Transcript

  1. 1PTU$44ǨԜ̱ƭƼǕƵௗƾ ȤȶǽDZɀƚǣƚǣ  $445BMLWPM

  2. ȬȆȬƀȌǼȫ 5XJUUFS!NJTVNJ@UBLVNB CMPHCMPHNJTNJUIQPSUGPMJPDPN ૔՛ਸʬ •ƠೀƢҩƣƽƯ •ܗ౴ӿǁ֤ƣƩǘǠฆƷǙǩƾ̖ƚƼǔƯง •ǯDZȀɀDžȜȺdzǰɀऐ (JU)VCHJUIVCDPNNJTNJUI

  3. None
  4. 1PTU$44ǨDžƮǗƼઓƚƵƾƣ • 1PTU$44Ǩ͢ǗƼઓƚƵDŽDžշƷǝƹƾͯDŽǸɀȢǮȹɀȆ • 4BTTǕƵƚǀ؎Ʈผผ • $44ܒƥDŽǨǨޟǁƭƼƥǢǡผผ • 4BTTǨ˚ƚҸǗƵƦǟƚƶƹƵDŽƽ1PTU$44ǔƽDžغʱơư

  5. 1PTU$44ǨƺơƹƼǕƵƣƹơƧ • ܗ౴8PSE1SFTTDŽ̴֠ȔǰȹǼȕȷक௬ऐȓɄȫƺƥƹƼƚƵǟƁ 1PTU$44DžƚƚƴƾڼƞƼǘǟƜ • ˶ʧȤȺȅǴǼȕƶƭƁƿƜƱǀǟώǠ̱ǢƼǕǞƜ • ƚƺǘ˚ƹƼǡ4BTTƾDžಜƜDŽǨ˚ƹƼǕƵơƹƵ • ࠮ҏDŽƘDŽǵɀȅȘǯDžώǠ̱ǢƼǡǞƾơஹǥǢǡฆƳƜƚƜDŽǁ֬

    ƚ ·ͩ࢖ͬͯͳ͍ํɺ ڵຯ࣋ͬͨΒͥͻ࢖ͬͯΈ͍ͯͩ͘͞
  6. ˚ƹƼǕƼ͜ơƹƵƩƾ • +4ƽ$44ǨҌړƭƼƥǢǡ • 1PTU$44ί˓ƽDž΋ơưƁ
 ȤȶǽDZɀǨ౼;ƭƼ˚Ɯ • ˚ƜȤȶǽDZɀǁǞƹƼDž
 ԘܶώǠ̱ǢǟǢǡ$44DŽޥۅǨ˚ ƜƩƾƢƽƣǡ

    • HVMQ (SVOU XFCQBDLǀƿǁԓזƭ Ƽƚǡ WBSHVMQSFRVJSF HVMQ  WBSQPTUDTTSFRVJSF HVMQQPTUDTT  HVMQUBTL TUZMFT GVODUJPO \ SFUVSOHVMQTSD < TSDDTTTUZMFDTT  >  QJQF QPTUDTT < SFRVJSF bQPTUDTTQMVHJO`  SFRVJSF bQPTUDTTQMVHJO`  SFRVJSF bQPTUDTTQMVHJO`  >  QJQF HVMQEFTU bEJTU`  ^ 
  7. 1PTU$44ǨƺơƹƼǕƵ؎؆ • ܗ͢DŽःѹ˖ǠƢȜɄȖȸ • ǷȹǷȹ1PTU$44ƢƽƣƳƜ • 4BTTǚTUZMVTǨ˚ƚƺƺԞƭưƺ˘ऐƭƼƚƥDŽƢࣴӵू • 4BTTDŽࣖ૔ޥۅǁ˟ӝƱư$44DŽܒƣۖƢƽƣǡ
 ฆʯިҌܑǁDžࠗ؋ง

    • ߅ɷʴDŽ$44DŽܒƣۖƽƣǡDŽDžޟƭƚ • ௦ƽǘȤȶǽDZɀ˖ƹƼ̴ങƽƣƼޟƭƚ • ƠǘƭǣȤȶǽDZɀǘ̴ങƫǢƼƼޟƭƚ
  8. 1PTU$44DŽȤȶǽDZɀ

  9. QPTUDTTDVTUPNQSPQFSUJFT • ҌہƢ˚ƞǡǞƜǁǀǡ • $44DŽʯިǁࠍƹƵҌہDŽܒƣۖ • ܗ౴DŽȣȶdzȃƽDžȀɀȞDZȸͯDŽܒƣۖƽ˚ƞǡฆ*&DžȍȮง • QPTUDTTTJNQMFWBSTƾƚƜƋҌہϪƌƽܒƥȤȶǽDZɀǘƘǡ ίϯύΠϧલ

    SPPU\ DPMPSSFE ^  I\ DPMPSWBS DPMPS  ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTDVTUPNQSPQFSUJFT ίϯύΠϧޙ I\ DPMPSSFE ^
  10. QPTUDTTOFTUJOH • ȚȆȕƢ˚ƞǡǞƜǁǀǡ • ƩǢǘ$44DŽʯިǁࠍƹƵܒƣۖฆơ!OFTUǨ˚Ɯง • QPTUDTTOFTUFEƾƚƜǨ˚ǥǀƚ4BTTƾϩƮܒƣۖDŽȤȶǽDZɀǘ ίϯύΠϧલ MJTU\ B\

    DPMPS IPWFS\ DPMPSCMVF ^ ^ IUUQTHJUIVCDPNKPOBUIBOUOFBMQPTUDTTOFTUJOH ίϯύΠϧޙ MJTUB\ DPMPS ^ MJTUBIPWFS\ DPMPSCMVF ^
  11. QPTUDTTJNQPSU • JNQPSUƽƣǡǞƜǁǀǡ • Ҍہǚ.JYJOਢDŽȤȶǽDZɀǞǠͯǁ௥Ǖ౮ǔǀƚƾƜǔƥȀɀȞDZȸƭ ƼƥǢǀƚƂܗ͢ǁ௥Ǖ౮ǖǞƜǁƭƼƠƥƾҔɯҗ JNQPSU !JNQPSUlMBZPVUIFBEFSDTT IUUQTHJUIVCDPNQPTUDTTQPTUDTTJNQPSU

  12. QPTUDTTBQQMZ • ਅ۬NJYJODŽǞƜǀǘDŽ • ȤȺȞȓǰDŽȸɄȸȈȐȕǨ˖Ǣǡ ίϯύΠϧલ SPPU\ CUOEFGBVMU\ DPMPSXIJUF CBDLHSPVOEDPMPSCMVF

    ^ ^ CVUUPO\ !BQQMZCUOEFGBVMU ^ IUUQTHJUIVCDPNQBTDBMEVF[QPTUDTTBQQMZ ίϯύΠϧޙ CVUUPO\ DPMPSXIJUF CBDLHSPVOEDPMPSCMVF ^
  13. QPTUDTTTFMFDUPSNBUDIFT • NBUDIFTƢ˚ƞǡǞƜǁǀǡ • XFCLJUBOZƾơ˚ƞdžƯƽǁ˚ƜƩƾǘƽƣǡฆ*&DžȍȮง • IPWFSǚGPDVTǀƿǘ˚ƞǡ ίϯύΠϧલ CPEZNBUDIFT IPNF

    QBHF TJOHMFQPTU I\ DPMPSSFE ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSNBUDIFT ίϯύΠϧޙ CPEZIPNFI  CPEZQBHFI  CPEZTJOHMFQPTUI\ DPMPSSFE ^
  14. QPTUDTTTFMFDUPSOPU • OPUDžƯƽǁ˚ƞǡƧƿƁதہ٥ӱǨϛળǁƭƼƥǢǡ • TBGBSJƽDžƯƽǁ˚ƞǡ • ȀɀȞDZȸׂDŽǞƜǁܒƧdžʫƽǘϩƮƩƾDžƽƣǡƢƁƯƹƣǠܒƧ ǡǞƜǁǀǡ ίϯύΠϧલ MJOPU

    MBTUDIJME TBNQMF \ DPMPSSFE ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSOPU ίϯύΠϧޙ MJOPU MBTUDIJME OPU TBNQMF \ DPMPSSFE ^
  15. ȤȶǽDZɀDžǀƚƧƿüฆIBTง • IBTƹƼƚƜDŽǘܗ౴଍ݫǁ౼;ƫǢƵǟƭƚ • ƘǡȈȹǼȌǨӚ஫ਰǁǘƺழ஫ਰǁ٥ӱƽƣǡ • ȤȶǽDZɀDžǔƶǀƚǕƵƚƶƧƿƁƩǢ˚ƞƵǟ˧ͥƶơǟǑƭƚƂ • ƯƽǁƘƹƵǟڼƞƼƥƶƫƚ IUNM

    VM MJϦετMJ MJϦετ VMDMBTTDIJME MJࢠϦετMJ VM MJ VM $44 DIJME͕ࢠཁૉʹ͋ΔMJʹࢦఆ MJIBT DIJME \ DPMPSCMVF ^
  16. QPTUDTTDTTOFYU • ەƭƚޮ࡝ʯިDŽ$44Ǩ˚ƞǡȤȶǽDZɀ
 ǨǔƾǗƼƥǢƼǡ • ʫǔƽਸʬƭƵȤȶǽDZɀǘ̱ƹƼǡ • ɳ஫ǀ޺ળDž0''ǁƽƣǡ • 1PTU$44Ǩ௒ƯǀǟƠƯƯǗ

    IUUQDTTOFYUJP HVMQ HVMQUBTL TUZMFT GVODUJPO \ SFUVSOHVMQTSD < TSDDTTTUZMFDTT  >  QJQF QPTUDTT < SFRVJSF QPTUDTTDTTOFYU \ GFBUVSFT\ DVTUPN1SPQFSUJFTGBMTF ^ ^  >  QJQF HVMQEFTU EJTU  ^ 
  17. ʰǁǘȤȶǽDZɀDžƵƥƫǩ • 1SF$44 • DTTOBOP 1BDLT • QPTUDTTDVTUPNNFEJB • QPTUDTTDPMPSIXC

    'VUVSF$444ZOUBY • BVUPQSFGJYFS • QPTUDTTXJMMDIBOHF 'BMMCBDLT • QPTUDTTDPOEJUJPOBMT • QPTUDTTGPS -BOHVBHF&YUFOTJPOT IUUQTHJUIVCDPNQPTUDTTQPTUDTTCMPCNBTUFSEPDTQMVHJOTNE
  18. ӵൂǁ˚ƹƼǕǡǁDž

  19. 4BTT4UVMVTƾ˘ऐ • 4BTTǨ˚ƚǀƢǟ • א஫ǀǘDŽƶƧ˚ƹƼƚƥ • 'BMMCBDLਢǚ'VUVSF$444ZOUBYDŽ ɽơǟ˚ƚƵƚǘDŽǨ౼; • 4BTTDŽȀɄȖDžܒƣړƞǡא஫ǀƭ

    • ׃Ƅǁ঳இƽƣǡ HVMQ HVMQUBTL TUZMFT GVODUJPO \ SFUVSOHVMQTSD QPTUDTTTUZMFTDTT  QJQF TBTT  QJQF QPTUDTT < SFRVJSF BVUPQSFpYFS  SFRVJSF QPTUDTTXJMMDIBOHF  SFRVJSF QPTUDTTDVTUPNQSPQFSUJFT  SFRVJSF QPTUDTTTFMFDUPSOPU  >  QJQF HVMQEFTU DTT  ^ 
  20. 1PTU$44DŽǕ • ܗ͢DžDTTOFYUǨ˚ƚƺƺʰDŽȤȶǽDZɀǘ௒Ư • Ƙǡ঵։˚ƹƼǕƵǟƁǷȹǷȹःѹ˖ƹƼǕƵǠ • ˶ʧूǁDž1PTU$44ƶƧƽःѹ˖ǡǀǟƁ$44ޮ࡝ƽܒƧǡȤȶǽDZɀǨ ಧnjDŽƢƚƚƾמƚǔƯƂ • 4BTTDŽܒƣۖǨȤȶǽDZɀƽ̱ǢǡƦǟƚǀǟƁ4BTTǨ˚ƹƼƠƚƵۖ

    Ƣƚƚ • ʯިƢҌǥƹƼƭǔƜDŽDžࠗ؋
  21. ƠǘƭǣਢȤȶǽDZɀ

  22. ƠǘƭǣȤȶǽDZɀƢƘǡ • ௦ƽǘȤȶǽDZɀǨ˖ǢǡƵǗƁֻǁ৘ƺDŽơ͜ơǟǀƚȚȌਢȤȶǽ DZɀǘƘǡ • ȤȶǽDZɀɫளȧɄȅDŽƋ'VOƌƾƚƜ൸॑ƢƳǢ

  23. 1PTU$44$VSSFODZ • ಇఙDŽίˎǨீϡǁҌƞƼƥǢǡȤȶǽDZɀ • ˚ƚಚǨઉƞƼǕƵƧƿמƚƺơǀơƹƵ ίϯύΠϧલ GPPBGUFS\ DPOUFOU+1: ^ IUUQTHJUIVCDPNUBMHBVUCQPTUDTTDVSSFODZ

    ίϯύΠϧޙ GPPBGUFS\ DPOUFOU= ^
  24. QPTUDTTQPJOUFS • ƋQPJOUFSDVSTPSƌƽǘƋDVSTPSQPJOUFSƌƽܒƣ͘ƭƼƥǢǡ • 5XJUUFSDŽƺnjǚƣƢƣƹơƧǟƭƚ • ਯǟǥƭƚơǟ˖ǟǢƵผผ ίϯύΠϧલ GPP\ QPJOUFSDVSTPS

    ^ IUUQTHJUIVCDPNNBSLHPPEZFBSQPTUDTTQPJOUFS ίϯύΠϧޙ GPP\ DVSTPSQPJOUFS ^
  25. 1PTU$44(FSNBO4UZMF4IFFUT • ȖDZȑ௡ƽ$44ǨܒƧǡ ίϯύΠϧલ GPP\ IÖIFQY BV–FOBCTUBOEVOUFOQY TDISJGUHS֖FQYXJDIUJH IJOUFSHSVOEGBSCFTDIXBS[ GBSCFXFJ–

    ^ IUUQTHJUIVCDPNUJNDIFQPTUDTTHFSNBOTUZMFTIFFUT ίϯύΠϧޙ GPP\ IFJHIUQY NBSHJOCPUUPNQY GPOUTJ[FQYJNQPSUBOU CBDLHSPVOEDPMPSCMBDL DPMPSXIJUF ^
  26. 1PTU$44+BQBOFTF4UZMFTIFFUT • ۞ܥ௡ƽ$44ǨܒƧǡ ίϯύΠϧલ GPP\ എܠ҉ࠇ৭ॏཁ ෯QY ߴ͞QY ^ IUUQTHJUIVCDPNJLLPVQPTUDTTKBQBOFTFTUZMFTIFFUT

    ίϯύΠϧޙ GPP\ CBDLHSPVOEFJNQPSUBOU XJEUIQY IFJHIUQY ^
  27. QPTUDTTIBMMPXFFO • $44DŽ٥ӱƽȜȺdzǰɀDŽDZȶȆȕǨஎ঍ƭƼƥǢǡ • $445SJDLPS5SFBUƾƚƜȜȺdzǰɀȞɄȓǰDŽȚȌƽ˖ǠǔƭƵƂ • ૔͜ƽȤȶǽDZɀ˖ǢǡƾƩǣǘ1PTU$44DŽޟƭƫ • DZȶȆȕΏ്ƭƼǔƯ ίϯύΠϧલ

    GPP\ ͓͹͚͔΅ͪΌ͓͹͚ ^ IUUQTHJUIVCDPNNJTNJUIQPTUDTTIBMMPXFFO ϒϥ΢β
  28. ƫƚƪǁǔƾǗ • ʫƯƦ4BTTǚ4UZMVTơǟʈǠړƞǡǏƣƾƚƜǥƧƽDžǀƚ • ׃Ƅǁ˚ƹƼǕǡǀǟ4BTTǚ4UZMVTƾ˘ऐ • ȤȶǽDZɀ˚Ɯǀǟ$44DŽʯިǁࠍƹƵǘDŽ • ƿDŽȤȶǽDZɀƢƚƚơ͜ơǟǀƚ۶DžƁDTTOFYUƽ௒ƭƼǕǡDŽƢƠƯ ƯǗ

    • ߅ɷʴDŽ$44DŽܒƣۖƽƣǡDŽDžޟƭƚ • ௦ƽǘȤȶǽDZɀ˖ƹƼ̴ങƽƣƼޟƭƚ • ƠǘƭǣȤȶǽDZɀǘ̴ങƫǢƼƼޟƭƚ
  29. Ӫ