1 css-preprocessors as a way to speed up the process of interfaces developing and achieve customer...
TRANSCRIPT
1
CSS-PREPROCESSORSas a way to speed upthe process of interfaces developingand achieve Customer goalsDMITRY SHURSHILIN
AUGUST 3, 2015
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
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
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
THE MOST POPULAR CSS-PREPROCESSORS
6
WHY USING PREPROCESSORS COULD BE USEFUL?
Convenience1
Performance2
Cross-browser support3
Maintenance4
Free frameworks and libraries5
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
SASS EXAMPLE
9
SCSS EXAMPLE
10
LESS EXAMPLE
11
STYLUS EXAMPLE
12
CSS RESULT
13
IF, ELSE, FOR, EACH - SCSS
14
CSS RESULT
15
ANOTHER SCSS EXAMPLE
16
CSS RESULT
17
SCSS MIXIN FOR MEDIA
18
SCSS MIXIN FOR PSEUDO-ELEMENTS
19
SCSS MIXIN FOR ABSOLUTE POSITION
20
SCSS MIXIN FOR BUTTONS
21
FRAMEWORKS AND LIBRARIES
22
TOOLS
Grunt / Gulp1
Ruby / Compass2
Plugins and extensions for your IDE3
Online-tools — SassMeister, LESS2CSS, Try Sass, LESS Tester etc.
4
Software — Prepros, Kodekit, Less.app, Koala, Crunch etc.5
23
2
1
3
WHY IS IT BENEFICIAL FOR CUSTOMER?
TEAM WORKSFASTER
• 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 REUSABLECODE
• 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
• 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
THANKS!