CSSfmt - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

CSSfmtͱ͸

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Over%600%star!%in%GitHub

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

੎͍͕͋Δ![ཁग़య]

Slide 9

Slide 9 text

Example

Slide 10

Slide 10 text

//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; }

Slide 11

Slide 11 text

// 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; }

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

How$to$use$CSSfmt

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

in#λεΫϥϯφʔ • Grunt • gulp • ﬂy

Slide 18

Slide 18 text

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')); });

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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