js lab2017_lightning talks_postcss - there is a plugin for that
TRANSCRIPT
2
2014
Основной стек технологий1. AngularJS
2. Sass + Compass
— Vendor prefixes
— Sprites
3. Grunt для сборки
// 2014 �
3
4
2015
Проблемы �1. Время сборки проекта
2. Ненужные вендорные префиксы
3. Странности в спрайтах
4. Зависимость от Ruby
5
Попытка #11. Убран Compass
2. Убрана зависимость от Ruby (LibSass)
3. Спрайтами теперь занимается grunt-spritesmith
4. Вендорными префиксами занимается Autoprefixer
5. cssmin сменился на cssnano
6
Результаты1. Сборка проекта занимает гораздо меньше времени
2. Sass стили стали чище (нет ненужных миксинов)
3. Вендорные префиксы соответствуют статистике используемых
браузеров
4. Результирующий файл стал меньшего размера
7
8
9
2016
SVG задача— Максимально быстрый переход
— Минимальные изменения в CSS стилях
— Возможность управлять стилизацией SVG иконок
Инструменты— postcss-inline-svg
— postcss-svgo
— postcss-assets
postcss: {
options: {
processors: [
require('postcss-assets')({loadPaths: ['images/icons/']}),
require('postcss-inline-svg')({path: 'images/icons/'}),
require('postcss-svgo')(),
require('autoprefixer')({browsers: ['last 2 versions']})
]
},
app: {...}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
=svg-icon($filename)
background: svg-load($filename + '.svg')
width: width($filename + '.svg')
height: height($filename + '.svg')
=svg-icon-no-size($filename)
background: svg-load($filename + '.svg')
01.
02.
03.
04.
05.
06.
07.
13
Бонусы �— cssnext
— stylelint
— cssnano
— rtlcss
— postcss-bem
— postcss-import
— postcss-sass
14
Ссылки— PostCSS website
— PostCSS plugins collection
— доклад от Андрея Ситника «PostCSS the Future after Sass and Less»
— Writing a PostCSS Plugin
— postcss-important-shorthand
15
17
Спасибо завнимание!
@Soul_Wishsoulwish.info