Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSfmt

 CSSfmt

at HTML5 Beginners 12th

Masaaki Morishita

August 27, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

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