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

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

ϒϩά

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

PostCSS

Over%5000%Star!%in%GitHub

No content

No content

No content

੎͍͕͋Δ!

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

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

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: '' }, 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: '' }, end: { line: 3, column: 20 } }, prop: 'padding', value: '5px 10px' } ],

ASTΛ͝ʹΐ͝ʹΐͯ͠ϓϥάΠϯ΍πʔϧ Λ࡞Δ

PostCSSͰ࡞ΒΕͨπʔϧ

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

Autoprefixer Input: .flex { display: flex; } Yield: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

cssnext ݱࡏࡦఆஈ֊Ͱϒϥ΢β͕ະ࣮૷ͷCSSͷه๏Λɺࠓͷϒϥ΢β ͕ղऍͰ͖ΔΑ͏ʹτϥϯεύΠϧ͢Δπʔϧ

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

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

ۀ຿Ͱ͸PostCSSͰ࡞ΒΕͨπʔϧ΍ ϓϥάΠϯ࢖͏͜ͱʹͳΔ

How$to$use$PostCSS

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/') ); });

@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ʹม׵Ͱ͖Δ

ͿͬͪΌ͚ͦΜͳػೳ͍ΒΜ(") ʢ@mixin΋@extend΋؅ཧͰ͖ΜΘʂʣ (@func'oin??஌Βͳ͍ࢠͰ͢Ͷ)

@import(ʹΑΔϑΝΠϧͷΠϯϥΠϯల։͚ͩ࢖͍͍ͨ gulp.task('postcss', function () { var postcss = require('gulp-postcss'); return gulp.src('src/**/*.css') .pipe( postcss([ require('postcss-import'), ]) ) .pipe( gulp.dest('build/') ); });

ηϨΫλʔͷωετ΋͍ͨ͠ʂ 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/') ); });

ඞཁͳػೳ͚ͩϓϥάΠϯͰ௥ՃͰ͖Δ

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

PostCSS'is'Awesome!!

Thanks':D morishi'er