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!