CSSfmt

at HTML5 Beginners 12th

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