Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSfmt
Search
Masaaki Morishita
August 27, 2015
Programming
2
210
CSSfmt
at HTML5 Beginners 12th
Masaaki Morishita
August 27, 2015
Tweet
Share
More Decks by Masaaki Morishita
See All by Masaaki Morishita
PostCSS: Build your own CSS processor
morishitter
6
4.6k
Houdini: Abracadabra CSS
morishitter
1
810
Modern CSS: architecture, future specs and build flow
morishitter
13
2.6k
PostCSS and cssnext
morishitter
11
1.8k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.4k
Introduction to CSS Architecture
morishitter
3
370
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
Interface vs Types ~型推論が過多推論~
hirokiomote
1
220
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
130
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
870
AI Coding Agent Enablement in TypeScript
yukukotani
15
6.4k
Investigating Multithreaded PostgreSQL
macdice
0
140
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
120
私のRubyKaigi 2025 Kaigi Effect / My RubyKaigi 2025 Kaigi Effect
chobishiba
1
200
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
6
1.6k
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
PT AI без купюр
v0lka
0
170
知識0からカンファレンスやってみたらこうなった!
syossan27
5
320
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
A better future with KSS
kneath
239
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
The Cult of Friendly URLs
andyhume
78
6.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Cost Of JavaScript in 2023
addyosmani
49
8k
Raft: Consensus for Rubyists
vanstee
137
7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building an army of robots
kneath
306
45k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Transcript
CSSfmt Format'your'(S)CSS'source'code in#ୈ12ճHTML5ϏΪφʔζ
About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • Blog:'h.p:/ /morishi.er.hatenablog.com
• αΠόʔΤʔδΣϯτʢ৽ଔ1ʣ
CSSfmtͱ
CSSfmt • Node.jsͷ(S)CSSίʔυܗπʔϧ • PostCSSͬͯ࡞ͬͯΔ • GofmtͷӨڹΛड͚ͯΔ • ϑΥʔϚοςΟϯάͷͨΊͷΦϓγϣϯͳ͍ •
created5by5morishi:er
Over%600%star!%in%GitHub
None
None
͍͕͋Δ![ཁग़య]
Example
//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; }
// 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; }
Rules&(Ұ෦) • 2εϖʔεΠϯσϯτ • ෳηϨΫλʔͷͱ͖վߦ • ϓϩύςΟʔͱ:ͷؒεϖʔε͚͋ͳ͍ • :ͱvalueͷؒʹ1εϖʔε •
ηϛίϩϯ͚ͭΔ • etc...
1൪ଟ͘ͷਓ͕ͬͯͦ͏ͳϑΥʔϚοτ .foo, .bar { color: moccasin; float: left !important; padding:
5px 10px 10px; } /* comment*/ .class { }
How$to$use$CSSfmt
in#Command#line $ npm install -g cssfmt $ cssfmt style.css σΟϨΫτϦࢦఆ:
$ cssfmt -R src/scss
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
in#λεΫϥϯφʔ • Grunt • gulp • fly
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')); });
ΤσΟλϓϥάΠϯ • Sublime)Text • Atom • Vim • Emacs
atom%cssfmt h"ps:/ /github.com/1000ch/atom3cssfmt
ͦΜͳͻͲ͍ίʔυॻ͔ΜΘ!(!)
ʮ4εϖʔεΠϯσϯτ͕͍͍ʂʯ ʮΘ͠λϒ͡Όʯ ʮηϨΫλʔͱ{ͷؒʹվߦೖΕ͍ͨʂʯ ʮ1ߦͰϧʔϧηοτॻ͖͍ͨʂʯ
! ͦ͏͍͏ͷΈͷ
νʔϜͰʢϨϏϡʔ࣌ʹʣϑΥʔϚοτΛ ౷Ұͤ͞Δ͜ͱ͕େ
h"ps:/ /github.com/morishi"er/cssfmt
Thanks':D morishi'er