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
190
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.5k
Houdini: Abracadabra CSS
morishitter
1
750
Modern CSS: architecture, future specs and build flow
morishitter
13
2.4k
PostCSS and cssnext
morishitter
11
1.6k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1k
PostCSS for beginners
morishitter
6
1.3k
Introduction to CSS Architecture
morishitter
3
320
Introduction to PostCSS
morishitter
6
1.6k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
リハビリmruby
kishima
1
160
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
CSC307 Lecture 05
javiergs
PRO
0
210
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
유연한 Composable 설계
l2hyunwoo
0
380
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
CSC307 Lecture 12
javiergs
PRO
0
220
Temporalを取り巻く仕様を整理する
sajikix
0
120
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
継続的な活動で築く地方エンジニアの道
myamashii
2
360
Featured
See All Featured
Statistics for Hackers
jakevdp
792
220k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Become a Pro
speakerdeck
PRO
15
4.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Why Our Code Smells
bkeepers
PRO
332
56k
Designing the Hi-DPI Web
ddemaree
276
34k
Teambox: Starting and Learning
jrom
130
8.6k
Code Review Best Practice
trishagee
58
16k
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