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
830
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.4k
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
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
770
Laravel Boost 超入門
fire_arlo
2
200
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
2
260
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.8k
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
為你自己學 Python - 冷知識篇
eddie
1
340
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
700
TanStack DB ~状態管理の新しい考え方~
bmthd
2
470
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Writing Fast Ruby
sferik
628
62k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Making Projects Easy
brettharned
117
6.4k
A better future with KSS
kneath
239
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Six Lessons from altMBA
skipperchong
28
4k
Fireside Chat
paigeccino
39
3.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
How to train your dragon (web standard)
notwaldorf
96
6.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