PostCSS for beginners

at HTML5 Beginners 12th

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