CSS周りにおける自動化手法とツールの紹介をしました。 実際のソースコード -> https://github.com/frontainer/autocss GulpとPostCSSを活用してCSS周りで自動化できるところを自動化してしまおうという内容です。 「書籍『最強のCSS設計』出版記念イベント＆勉強会　―　CSS設計、チーム開発を成功させるために必要なこと」(https://atnd.org/events/71753) 登壇資料です。

1. A u t o m a t e d C S S

2. @frontainer
CTO
Front-end Engineer
林 優一
株式会社LIG - CTO （フロントエンドチームリーダー)
AngularJS Japan User Group
フロントエンド開発・フロントエンドエンジニア育成を担当し
デザイン分野からサーバーサイド分野まで幅広く対応。
AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitで
スピーカーを務める。得意言語はJavaScript。
2015年6月にフロントエンドチームリーダー兼務のままCTO就任。
自社開発チームのエンジニアとしても活動。

3. - CSSのインデントや記述の仕方がバラバラ
- パフォーマンス・チューニング？？
- ベンダープレフィックスなんてとりあえず全部つけておけばいいだろう！
- 圧縮を納品前にやって、圧縮したら崩れた

4. A u t o m a t e d C S S

5. - 常に同じ動作をするために、共通の書式が保てる
- 人がやる作業が減るので制作に専念できる
- そもそも人がやるには大変過ぎる作業が随時できる

6. L e t ’ s t r y ! !
h t t p s : / / g i t h u b . c o m / f r o n t a i n e r / a u t o c s s

7. N o d e . j s
h t t p s : / / n o d e j s . o r g / e n /

10. G u l p . j s
h t t p : / / g u l p j s . c o m /

11. $ npm i gulp -g

12. $ npm i gulp-sass --save-dev
$ npm i gulp-sass-lint --save-dev
$ npm i gulp-csso --save-dev
$ npm i gulp-postcss --save-dev
$ npm i autoprefixer --save-dev
$ npm i doiuse --save-dev
$ npm i css-mqpacker --save-dev

13. var gulp = require('gulp');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var postcss = require('gulp-postcss');
var csso = require('gulp-csso');
gulp.task('default', function () {
return gulp.watch('*.scss',['css']);
});
var browsers = [
//'last 2 versions',
//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
gulpfile.js

14. g u l p - s a s s
h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / g u l p - s a s s

15. //'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js

17. $font-size: 30px;
$link-color: #ff290e;
.test {
.test-heading {
font-size: 20px;
font-weight: bold;
}
.test-content {
padding: 10px 10px 10px 10px;
}
}
.test .test-heading {
font-size: 30px;
font-weight: 700;
}
.test .test-content {
padding: 10px 10px 10px 10px;
}

18. g u l p - s a s s - l i n t
h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / g u l p - s a s s - l i n t

19. //'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js

20. files:
include: '**/*.scss'
options:
formatter: stylish
merge-default-rules: false
rules:
border-zero:
- 1
- convention: zero
brace-style:
- 1
- allow-single-line: true
clean-import-paths:
- 1
- filename-extension: false
leading-underscore: false
empty-line-between-blocks:
- 0
- ignore-single-line-rulesets: true
extends-before-declarations: 1
.sass-lint.yml

21. R u l e s
h t t p s : / / g i t h u b . c o m / s a s s t o o l s / s a s s - l i n t / t r e e / m a s t e r / d o c s / r u l e s

23. g u l p - c s s o
h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / g u l p - c s s o

24. //'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js

25. $font-size: 30px;
$link-color: #ff290e;
.test {
.test-heading {
font-size: 20px;
font-weight: bold;
}
.test-content {
padding: 10px 10px 10px 10px;
}
}
.test .test-heading {
font-size: 30px;
font-weight: 700;
}
.test .test-content {
padding: 10px 10px 10px 10px;
}
.test .test-heading{font-size:30px;font-weight:700}.test .test-content{padding:10px}

26. g u l p - p o s t c s s
h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / g u l p - p o s t c s s

27. //'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js

28. A u t o P r e f i x e r
h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / a u t o p r e f i x e r

29. //'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js

30. return gulp.watch('*.scss',['css']);
});
var browsers = [
//'last 2 versions',
//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
gulpfile.js

31. a {
&:hover {
transform: scale(1.2);
}
}
a:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}

32. D o I U s e
h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / d o i u s e

33. //'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js

34. a {
&:hover {
transform: scale(1.2);
filter: blur(10px);
}
}
a:hover{-webkit-transform:scale(1.2);transform:scale(1.2);
-webkit-filter:blur(10px);filter:blur(10px)}

36. c s s - m q p a c k e r
h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / c s s - m q p a c k e r

37. //'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js

38. @media screen and (max-width:800px) {
.test {
width: 100px;
}
}
@media screen and (max-width:800px) {
.test2 {
width: 200px;
}
}
@media screen and (max-width:800px){.test{width:100px}.test2{width:200px}}

39. W a t c h i n g

40. var gulp = require('gulp');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var postcss = require('gulp-postcss');
var csso = require('gulp-csso');
gulp.task('default', function () {
return gulp.watch('*.scss',['css']);
});
var browsers = [
//'last 2 versions',
//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
gulpfile.js

42. T o d a y ’ s E n v i r o n m e n t
h t t p s : / / g i t h u b . c o m / f r o n t a i n e r / a u t o c s s

43. F u l l V e r s i o n
h t t p s : / / g i t h u b . c o m / f r o n t a i n e r / f r o n t p l a t e
h t t p s : / / g i t h u b . c o m / f r o n t a i n e r / f r o n t p l a t e / t r e e / d e v e l o p
β V e r s i o n

44. T h a n k y o u
@frontainer