CSSfmt

at HTML5 Beginners 12th

Transcript

1. CSSfmt
   Format'your'(S)CSS'source'code
   in#ୈ12ճHTML5ϏΪφʔζ
   

   View Slide

2. About&me
   • Masaaki'Morishita
   • Twi.er:'@morishi.er_
   • GitHub:'morishi.er
   • Blog:'h.p:/
   /morishi.er.hatenablog.com
   • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ
   

   View Slide

3. CSSfmtͱ͸
   

   View Slide

4. CSSfmt
   • Node.js੡ͷ(S)CSSίʔυ੔ܗπʔϧ
   • PostCSS࢖ͬͯ࡞ͬͯΔ
   • GofmtͷӨڹΛड͚ͯΔ
   • ϑΥʔϚοςΟϯάͷͨΊͷΦϓγϣϯ͸ͳ͍
   • created5by5morishi:er
   

   View Slide

5. Over%600%star!%in%GitHub
   

   View Slide

6. View Slide

7. View Slide

8. ੎͍͕͋Δ![ཁग़య]
   

   View Slide

9. Example
   

   View Slide

10. //mixin for clearfix
    @mixin clearfix () { &:before,
    &:after {
    content:" ";
    display : table; }
    &:after {clear: both;}
    }.class
    {
    padding:10px;@include clearfix();}
    //placeholder
    %base
    {
    padding: 12px
    }.bar
    { @extend %base;
    }
    

    View Slide

11. // mixin for clearfix
    @mixin clearfix () {
    &:before,
    &:after {
    content: " ";
    display: table;
    }
    &:after {
    clear: both;
    }
    }
    .class {
    padding: 10px;
    @include clearfix();
    }
    // placeholder
    %base {
    padding: 12px;
    }
    .bar {
    @extend %base;
    }
    

    View Slide

12. Rules&(Ұ෦)
    • 2εϖʔεΠϯσϯτ
    • ෳ਺ηϨΫλʔͷͱ͖͸վߦ
    • ϓϩύςΟʔͱ:ͷؒ͸εϖʔε͚͋ͳ͍
    • :ͱvalueͷؒʹ͸1εϖʔε
    • ηϛίϩϯ͚ͭΔ
    • etc...
    

    View Slide

13. 1൪ଟ͘ͷਓ͕࢖ͬͯͦ͏ͳϑΥʔϚοτ
    .foo,
    .bar {
    color: moccasin;
    float: left !important;
    padding: 5px 10px 10px;
    }
    /* comment*/
    .class {
    }
    

    View Slide

14. How$to$use$CSSfmt
    

    View Slide

15. in#Command#line
    $ npm install -g cssfmt
    $ cssfmt style.css
    σΟϨΫτϦࢦఆ:
    $ cssfmt -R src/scss
    

    View Slide

16. in#Command#line
    $ cssfmt --help
    Usage: cssfmt [options] input-file [output-file]
    Options:
    -d, --diff output diff against original file
    -R, --recursive format files recursively
    -V, --versions output the version number
    -h, --help output usage information
    

    View Slide

17. in#λεΫϥϯφʔ
    • Grunt
    • gulp
    • fly
    

    View Slide

18. gulp%cssfmt
    var gulp = require('gulp');
    var cssfmt = require('gulp-cssfmt');
    gulp.task('cssfmt', function () {
    return gulp.src('src/style.css')
    .pipe(cssfmt())
    .pipe(gulp.dest('dist'));
    });
    

    View Slide

19. ΤσΟλϓϥάΠϯ
    • Sublime)Text
    • Atom
    • Vim
    • Emacs
    

    View Slide

20. atom%cssfmt
    h"ps:/
    /github.com/1000ch/atom3cssfmt
    

    View Slide

21. ͦΜͳͻͲ͍ίʔυॻ͔ΜΘ!(!)
    

    View Slide

22. ʮ4εϖʔεΠϯσϯτ͕͍͍ʂʯ
    ʮΘ͠͸λϒ೿͡Όʯ
    ʮηϨΫλʔͱ{ͷؒʹվߦೖΕ͍ͨʂʯ
    ʮ1ߦͰϧʔϧηοτॻ͖͍ͨʂʯ
    

    View Slide

23. !
    ͦ͏͍͏ͷ͸޷Έͷ໰୊
    

    View Slide

24. νʔϜ಺ͰʢϨϏϡʔ࣌ʹʣϑΥʔϚοτΛ
    ౷Ұͤ͞Δ͜ͱ͕େ੾
    

    View Slide

25. h"ps:/
    /github.com/morishi"er/cssfmt
    

    View Slide

26. Thanks':D
    morishi'er
    

    View Slide