1. 1 CSS-PREPROCESSORS as a way to speed up the process of interfaces developing and achieve Customer goals DMITRY SHURSHILIN AUGUST 3, 2015

2. 2 ABOUT CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

3. 3 ABOUT CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

4. 4 ABOUT CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Weaknesses Lack of basic features Hard to maintain Not DRY enough — leads to mistakes @import — leads to many http-requests Wishes Variables, nesting, color operations Reuse @import

5. 5 THE MOST POPULAR CSS-PREPROCESSORS

6. 6 WHY USING PREPROCESSORS COULD BE USEFUL? Convenience 1 Performance 2 Cross-browser support 3 Maintenance 4 Free frameworks and libraries 5

7. 7 1. Variables 2. Nesting 3. Mixins and extends 4. If/Else/Loops/etc 5. Math and color operations 6. Color functions 7. Imports and minifications MAIN FEATURES

8. 8 SASS EXAMPLE

9. 9 SCSS EXAMPLE

10. 10 LESS EXAMPLE

11. 11 STYLUS EXAMPLE

12. 12 CSS RESULT

13. 13 IF, ELSE, FOR, EACH - SCSS

14. 14 CSS RESULT

15. 15 ANOTHER SCSS EXAMPLE

16. 16 CSS RESULT

17. 17 SCSS MIXIN FOR MEDIA

18. 18 SCSS MIXIN FOR PSEUDO-ELEMENTS

19. 19 SCSS MIXIN FOR ABSOLUTE POSITION

20. 20 SCSS MIXIN FOR BUTTONS

21. 21

22. 22 Grunt / Gulp 1 Ruby / Compass 2 Plugins and extensions for your IDE 3 Online-tools — SassMeister, LESS2CSS, Try Sass, LESS Tester etc. 4 Software — Prepros, Kodekit, Less.app, Koala, Crunch etc. 5

23. 23 2 1 3 WHY IS IT BENEFICIAL FOR CUSTOMER? TEAM WORKS FASTER Using a lot of features team members collaborate more efficiently Using frameworks and libraries team works faster — result earlier Reusing is easier Less man-hours to complete work FLEXIBILITY AND RESPONSIVENESS Less time to make some important changes Less time to extend existent code Great opportunities to collaborate with customer and designers MAINTAINABLE AND REUSABLE CODE Code is more maintainable and clean — new team member can start faster Code is more reusable — don’t need to spend time for the same

24. 24 Customer / Designer changed color palette or font family. We need to reuse some part from other application. We need to add new device support. We need to add some browser support. We need to create prototype in Customer colors. … PROBLEMS THAT COULD BE SOLVED WITH PREPROCESSORS

25. 25 THANKS!