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
220
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.7k
Houdini: Abracadabra CSS
morishitter
1
840
Modern CSS: architecture, future specs and build flow
morishitter
13
2.7k
PostCSS and cssnext
morishitter
11
1.8k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.5k
Introduction to CSS Architecture
morishitter
3
380
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
980
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
210
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
910
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
120
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
410
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
480
Introduce Hono CLI
yusukebe
6
2.7k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
220
チームの境界をブチ抜いていけ
tokai235
0
180
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
120
Leading Effective Engineering Teams in the AI Era
addyosmani
7
470
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
RailsConf 2023
tenderlove
30
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Automating Front-end Workflow
addyosmani
1371
200k
Scaling GitHub
holman
463
140k
For a Future-Friendly Web
brad_frost
180
10k
Unsuck your backbone
ammeep
671
58k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
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