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

PostCSS for beginners

PostCSS for beginners

at HTML5 Beginners 12th

Masaaki Morishita

August 27, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

  1. PostCSS'for'Beginners in#ୈ12ճHTML5ϏΪφʔζ

  2. About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ •

    PostCSSΤόϯδΣϦετʢࣗশʣ
  3. ϒϩά

  4. PostCSSͰ࡞ͬͨ΋ͷ • CSSfmt:((S)CSSίʔυ੔ܗπʔϧ • AtCSS:(΅͕͔͘Μ͕͍͖͑ͨ͞ΐ͏ͷCSSϓϦϓϩηοαʔ • postcss0style0guide:(ελΠϧΨΠυδΣωϨʔλʔ • ଞϓϥάΠϯ7ͭ

  5. PostCSS

  6. Over%5000%Star!%in%GitHub

  7. None
  8. None
  9. None
  10. ੎͍͕͋Δ!

  11. PostCSSͱ͸ • Node.js੡ͷCSSύʔαʔʢv5͔Β͸CSS͚ͩͷύʔαʔͰ͸ͳ ͘ͳͬͨʣ • ASTʢύʔε݁ՌͷJSΦϒδΣΫτʣΛૢ࡞͢ΔศརAPIΛఏڙ • ϓϥάΠϯ౳ͷΤίγεςϜ΋ؚΊͯPostCSSͱݺ͹ΕΔ

  12. PostCSSͰύʔε .class { font-size: 14px; padding: 5px 10px; }

  13. ASTʢൈਮʣ { raws: { before: '', between: ' ', semicolon:

    true, after: '\n' }, type: 'rule', nodes: [ { raws: { before: '\n ', between: ': ' }, type: 'decl', parent: [Circular], source: { start: { line: 2, column: 3 }, input: { css: '.class {\n font-size: 14px;\n padding: 5px 10px;\n}\n', id: '<input css 1>' }, end: { line: 2, column: 18 } }, prop: 'font-size', value: '14px' }, { raws: { before: '\n ', between: ': ' }, type: 'decl', parent: [Circular], source: { start: { line: 3, column: 3 }, input: { css: '.class {\n font-size: 14px;\n padding: 5px 10px;\n}\n', id: '<input css 1>' }, end: { line: 3, column: 20 } }, prop: 'padding', value: '5px 10px' } ],
  14. ASTΛ͝ʹΐ͝ʹΐͯ͠ϓϥάΠϯ΍πʔϧ Λ࡞Δ

  15. PostCSSͰ࡞ΒΕͨπʔϧ

  16. Autoprefixer ϕϯμʔϓϨϑΟοΫεΛࣗಈ෇༩͢Δπʔϧ

  17. Autoprefixer Input: .flex { display: flex; } Yield: .flex {

    display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  18. cssnext ݱࡏࡦఆஈ֊Ͱϒϥ΢β͕ະ࣮૷ͷCSSͷه๏Λɺࠓͷϒϥ΢β ͕ղऍͰ͖ΔΑ͏ʹτϥϯεύΠϧ͢Δπʔϧ

  19. cssnext • Custom(proper,es(&(var() • Custom(selectors • Custom(media(queries • media(queries(ranges •

    color() • etc..
  20. cssnext :root { --mainColor: #ffbbaaff; } @custom-media --mobile (width <=

    640px); @custom-selector :--heading h1, h2, h3, h4, h5, h6; .post-article :--heading { color: color( var(--mainColor) blackness(+20%) ); } @media (--mobile) { .post-article :--heading { margin-top: 0; } }
  21. ۀ຿Ͱ͸PostCSSͰ࡞ΒΕͨπʔϧ΍ ϓϥάΠϯ࢖͏͜ͱʹͳΔ

  22. How$to$use$PostCSS

  23. in#gulp gulp.task('postcss', function () { var postcss = require('gulp-postcss'); return

    gulp.src('src/**/*.css') .pipe( postcss([ require('postcss-mixins'), require('postcss-nested'), require('postcss-simple-vars'), require('cssnext'), require('cssnano'), ]) ) .pipe( gulp.dest('build/') ); });
  24. @define-mixin icon $network, $color: blue { .icon.is-$(network) { color: $color;

    @mixin-content; &:hover { color: white; background: $color; } } } @mixin icon twitter { background: url(twt.png); } @mixin icon youtube, red { background: url(youtube.png); } ↑ͷΑ͏ͳίʔυΛCSSʹม׵Ͱ͖Δ
  25. ͿͬͪΌ͚ͦΜͳػೳ͍ΒΜ(") ʢ@mixin΋@extend΋؅ཧͰ͖ΜΘʂʣ (@func'oin??஌Βͳ͍ࢠͰ͢Ͷ)

  26. @import(ʹΑΔϑΝΠϧͷΠϯϥΠϯల։͚ͩ࢖͍͍ͨ gulp.task('postcss', function () { var postcss = require('gulp-postcss'); return

    gulp.src('src/**/*.css') .pipe( postcss([ require('postcss-import'), ]) ) .pipe( gulp.dest('build/') ); });
  27. ηϨΫλʔͷωετ΋͍ͨ͠ʂ gulp.task('postcss', function () { var postcss = require('gulp-postcss'); return

    gulp.src('src/**/*.css') .pipe( postcss([ require('postcss-import'), require('postcss-nested') ]) ) .pipe( gulp.dest('build/') ); });
  28. ඞཁͳػೳ͚ͩϓϥάΠϯͰ௥ՃͰ͖Δ

  29. PostCSSͷಋೖ͸ҙ֎ͱ؆୯ SassΑΓ؆୯͔΋!? PostCSSා͘ͳ͍Αʔ

  30. PostCSS'is'Awesome!!

  31. Thanks':D morishi'er