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ϏΪφʔζ

    View Slide

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

    View Slide

  3. ϒϩά

    View Slide

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

    View Slide

  5. PostCSS

    View Slide

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

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. ੎͍͕͋Δ!

    View Slide

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

    View Slide

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

    View Slide

  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: '' },
    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' } ],

    View Slide

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

    View Slide

  15. PostCSSͰ࡞ΒΕͨπʔϧ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. How$to$use$PostCSS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. PostCSS'is'Awesome!!

    View Slide

  31. Thanks':D
    morishi'er

    View Slide