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

  2. About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • Blog:'h.p:/ /morishi.er.hatenablog.com

    • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ
  3. CSSfmtͱ͸

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

    created5by5morishi:er
  5. Over%600%star!%in%GitHub

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

  9. Example

  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; }
  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; }
  12. Rules&(Ұ෦) • 2εϖʔεΠϯσϯτ • ෳ਺ηϨΫλʔͷͱ͖͸վߦ • ϓϩύςΟʔͱ:ͷؒ͸εϖʔε͚͋ͳ͍ • :ͱvalueͷؒʹ͸1εϖʔε •

    ηϛίϩϯ͚ͭΔ • etc...
  13. 1൪ଟ͘ͷਓ͕࢖ͬͯͦ͏ͳϑΥʔϚοτ .foo, .bar { color: moccasin; float: left !important; padding:

    5px 10px 10px; } /* comment*/ .class { }
  14. How$to$use$CSSfmt

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

    $ cssfmt -R src/scss
  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
  17. in#λεΫϥϯφʔ • Grunt • gulp • fly

  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')); });
  19. ΤσΟλϓϥάΠϯ • Sublime)Text • Atom • Vim • Emacs

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

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

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

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

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

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

  26. Thanks':D morishi'er