PostCSS for beginners

at HTML5 Beginners 12th

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
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