Automated css

1.
A u to 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 to 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 de . j s h t t p s : / / n o d e j s . o r g / e n /

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

11.
$ npm igulp -g

12.
$ npm igulp-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 lp - 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 lp - 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.

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 le 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 lp - 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.

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 lp - 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.

28.
A u to 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.

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 IU 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.

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.

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 tc 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 da 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 ll 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 an k y o u @frontainer

Automated css

More Related Content

What's hot

More from Hayashi Yuichi

Automated css