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. 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' } ],
  2. Autoprefixer Input: .flex { display: flex; } Yield: .flex {

    display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  3. 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; } }
  4. 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/') ); });
  5. @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ʹม׵Ͱ͖Δ
  6. @import(ʹΑΔϑΝΠϧͷΠϯϥΠϯల։͚ͩ࢖͍͍ͨ gulp.task('postcss', function () { var postcss = require('gulp-postcss'); return

    gulp.src('src/**/*.css') .pipe( postcss([ require('postcss-import'), ]) ) .pipe( gulp.dest('build/') ); });
  7. ηϨΫλʔͷωετ΋͍ͨ͠ʂ 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/') ); });