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

7e56a691cfb413e0f6e631791f33fe54?s=47 misumi
October 29, 2016

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

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

7e56a691cfb413e0f6e631791f33fe54?s=128

misumi

October 29, 2016
Tweet

Transcript

  1. 3.
  2. 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`  ^ 
  3. 9.

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

    SPPU\ DPMPSSFE ^  I\ DPMPSWBS DPMPS  ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTDVTUPNQSPQFSUJFT ίϯύΠϧޙ I\ DPMPSSFE ^
  4. 10.

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

    DPMPS IPWFS\ DPMPSCMVF ^ ^ IUUQTHJUIVCDPNKPOBUIBOUOFBMQPTUDTTOFTUJOH ίϯύΠϧޙ MJTUB\ DPMPS ^ MJTUBIPWFS\ DPMPSCMVF ^
  5. 12.

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

    ^ ^ CVUUPO\ !BQQMZCUOEFGBVMU ^ IUUQTHJUIVCDPNQBTDBMEVF[QPTUDTTBQQMZ ίϯύΠϧޙ CVUUPO\ DPMPSXIJUF CBDLHSPVOEDPMPSCMVF ^
  6. 13.

    QPTUDTTTFMFDUPSNBUDIFT • NBUDIFTƢ˚ƞǡǞƜǁǀǡ • XFCLJUBOZƾơ˚ƞdžƯƽǁ˚ƜƩƾǘƽƣǡฆ*&DžȍȮง • IPWFSǚGPDVTǀƿǘ˚ƞǡ ίϯύΠϧલ CPEZNBUDIFT IPNF

    QBHF TJOHMFQPTU I\ DPMPSSFE ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSNBUDIFT ίϯύΠϧޙ CPEZIPNFI  CPEZQBHFI  CPEZTJOHMFQPTUI\ DPMPSSFE ^
  7. 14.

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

    MBTUDIJME TBNQMF \ DPMPSSFE ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSOPU ίϯύΠϧޙ MJOPU MBTUDIJME OPU TBNQMF \ DPMPSSFE ^
  8. 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 ^
  9. 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  ^ 
  10. 17.

    ʰǁǘȤȶǽDZɀDžƵƥƫǩ • 1SF$44 • DTTOBOP 1BDLT • QPTUDTTDVTUPNNFEJB • QPTUDTTDPMPSIXC

    'VUVSF$444ZOUBY • BVUPQSFGJYFS • QPTUDTTXJMMDIBOHF 'BMMCBDLT • QPTUDTTDPOEJUJPOBMT • QPTUDTTGPS -BOHVBHF&YUFOTJPOT IUUQTHJUIVCDPNQPTUDTTQPTUDTTCMPCNBTUFSEPDTQMVHJOTNE
  11. 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  ^ 
  12. 25.

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

    ^ IUUQTHJUIVCDPNUJNDIFQPTUDTTHFSNBOTUZMFTIFFUT ίϯύΠϧޙ GPP\ IFJHIUQY NBSHJOCPUUPNQY GPOUTJ[FQYJNQPSUBOU CBDLHSPVOEDPMPSCMBDL DPMPSXIJUF ^
  13. 29.

    Ӫ