Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Lab2017_Lightning Talks_PostCSS - there is a plugin for that

111 views

Published on

JS Lab2017, 25 марта, Одесса
Lightning Talks
PostCSS - there is a plugin for that (Сергей Лысенко)
Все материалы: http://jslab.in.ua/
Организаторы: http://geekslab.org.ua/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JS Lab2017_Lightning Talks_PostCSS - there is a plugin for that

  1. 1. PostCSS Для этого существует плагин @PostCSS Андрей Ситник
  2. 2. 2 2014
  3. 3. Основной стек технологий 1. AngularJS 2. Sass + Compass — Vendor prefixes — Sprites 3. Grunt для сборки // 2014 3
  4. 4. 4 2015
  5. 5. Проблемы 1. Время сборки проекта 2. Ненужные вендорные префиксы 3. Странности в спрайтах 4. Зависимость от Ruby 5
  6. 6. Попытка #1 1. Убран Compass 2. Убрана зависимость от Ruby (LibSass) 3. Спрайтами теперь занимается grunt-spritesmith 4. Вендорными префиксами занимается Autoprefixer 5. cssmin сменился на cssnano 6
  7. 7. Результаты 1. Сборка проекта занимает гораздо меньше времени 2. Sass стили стали чище (нет ненужных миксинов) 3. Вендорные префиксы соответствуют статистике используемых браузеров 4. Результирующий файл стал меньшего размера 7
  8. 8. 8
  9. 9. 9 2016
  10. 10. SVG задача — Максимально быстрый переход — Минимальные изменения в CSS стилях — Возможность управлять стилизацией SVG иконок Инструменты — postcss-inline-svg — postcss-svgo — postcss-assets
  11. 11. 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.
  12. 12. =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. 13. 13
  14. 14. Бонусы — cssnext — stylelint — cssnano — rtlcss — postcss-bem — postcss-import — postcss-sass 14
  15. 15. Ссылки — PostCSS website — PostCSS plugins collection — доклад от Андрея Ситника «PostCSS the Future after Sass and Less» — Writing a PostCSS Plugin — postcss-important-shorthand 15
  16. 16. 16 bit.do/jslab
  17. 17. 17 Спасибо за внимание! @Soul_Wishsoulwish.info

×