Some slides to talk about Preprocessors CSS, SASS in details Twitter acount chagend: twitter.com/gBaylaender Codepen acocunt changed: https://codepen.io/gbaylaender/pen/gIsnw

1. PREPROCESSORS CSS
//How to improve your workflow
@import improve-css
@oeg87

2. 16.04.2012
2nd Meeting
FrontEnders Ticino
www.frontenders.ch

3. Web designer
@oeg87
3

4. CSS is good …
@oeg87 4

5. Preprocessor are better
@oeg87 5

6. Everybody use CSS
@oeg87 6

7. Everybody use CSS is limited
But
@oeg87 7

8. Everybody use CSS is limited
If you have used a
preprocessor
But
@oeg87 8

9. Some preprocessors
http://www.catswhocode.com/blog/8-css-preprocessors-to-speed-up-development-time@oeg87 9

10. What is “SASS”?
Syntactically Awesome StyleSheets
@oeg87 10

11. Few words to describe SASS
• Variables
• Mixins
• Selector inheritance
• Calculations
• Functions
• Conditionals
• Loops
@oeg87 11

12. Install and use
gem install sass
sass --watch file.scss:file.css
@oeg87 12

13. SASS Takes everything that’s
missing from css
@oeg87 13

14. SASS Takes everything that’s
missing from css
and puts it into CSS
@oeg87 14

15. SASS Takes everything that’s
missing from css
and puts it into CSS
“SASS is as powerful as you want it to be”
@oeg87 15

16. Thinking that …
.class {
color: #ffdd00;
font: 16/1.4 Arial;
margin: 0;
}
@oeg87 16

17. How many people have used that?
@oeg87 17

18. Variables
SASS
$brand-color: #ffdd00;
.class {
color: $brand-color;
font: 16/1.4 Arial;
margin: 0;
}
CSS
.class {
color: #ffdd00;
font: 16/1.4 Arial;
margin: 0;
}
@oeg87 18

19. Nesting
SASS
.class {
color: #ffdd00;
font: 16/1.4 Arial;
margin: 0;
a {
display: block;
width: 100px;
height: 50px;
}
}
CSS
.class {
color: #ffdd00;
font: 16/1.4 Arial;
margin: 0;
}
.class a {
display: block;
width: 100px;
height: 50px;
}
@oeg87 19

20. The Ampersand
SASS
.class {
color: $brand-color;
font: 16/1.4 Arial;
margin: 0;
&.new-class {
color: $sub-color;
}
}
CSS
.class {
color: #ffdd00;
font: 16/1.4 Arial;
margin: 0;
}
.class.new-class {
color: #000;
}
@oeg87 20

21. Selector Inheritance
SASS
.class {
color: $brand-color;
font: 16/1.4 Arial;
margin: 0;
}
.new-class {
@extend .class;
padding: 10px;
}
CSS
.class, .new-class {
color: $brand-color;
font: 16/1.4 Arial;
margin: 0;
}
.new-class {
padding:10px;
}
@oeg87 21

22. Calculations
SASS
$grid-margin: 10px;
.class {
color: $brand-color;
font: 16/1.4 Arial;
margin: $grid-margin * 2;
}
CSS
.class {
color: $brand-color;
font: 16/1.4 Arial;
margin: 20px;
}
@oeg87 22

23. Color Manipulation
SASS
.class {
color: darken(#fd0,30%);
font: 16/1.4 Arial;
margin: 0;
}
CSS
.class {
color: #665800;
font: 16/1.4 Arial;
margin: 0;
}
@oeg87 23

24. Mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-khtml-border-radius: $radius;
border-radius: $radius;
}
.class {
color: #ffdd00;
font: 16/1.4 Arial;
margin: 0;
@include border-radius(4px);
}
@oeg87 24

25. Cycles
SASS
$list: #000, #999, #ccc;
@for $i from 1 through length($list){
.class-#{$i} {
color: nth($list, $i);
}
}
CSS
.class-1 {
color: #000;
}
.class-2 {
color: #999;
}
.class-3 {
color: #ccc;
}
@oeg87 25

26. And a lot more
@oeg87 26

27. Preprocessor does not replace
a css…
@oeg87 27

28. Preprocessor does not replace
a css…
the preprocessors makes css
better
@oeg87 28

29. To know
More things
@oeg87 29

30. compass
SASS living without compass, but compass does not living
without SASS
@oeg87 30

31. • A framework/extensions of CSS3 that uses Sass
• Open-source project
• A collection of patterns, rules, variables, mixins,
and more
@oeg87 31

32. Two syntaxes
SASS e SCSS
@oeg87 32

33. SCSS
.class {
color: $brand-color;
font: 16/1.4 Arial;
margin: 0;
.new-class {
@extend class;
margin: 10px;
}
}
SASS
.class
color: $brand-color
font: 16/1.4 Arial
margin: 0
.new-class
@extend class
margin: 10px
@oeg87 33

34. The compression types
@oeg87 34

35. //Compact
.wrap{ /*comment*/ margin:0 auto; }
.wrap .inside {width:500px; margin:0 auto}
//Compressed
.wrap{margin:0 auto}.wrap .inside{width:500px;margin:0 auto}
//Expanded
.wrap {
/*comment*/
margin:0 auto;
}
.wrap .inside {
width:500px;
margin:0 auto
}
sass --watch --style compact file.scss:file.css
@oeg87 35

36. Positive aspects
//Obviously, there are
@oeg87 36

37. +
• Save time
• @import
• Help to reduce HTTP request
• DRY principle (Don’t Repeat Yourself)
• Re-use
• Easy learning curve
• // comments
@oeg87 37

38. Negative aspects
//Yes, we found negative aspects here, too
@oeg87 38

39. –
• Losing semplicity concepts of CSS
• Need to have Ruby
• You want not go back to traditional CSS
• Documentation isn’t always clear (SASS), LESS is
better in this way
@oeg87 39

40. Let’s code
<code> <code> <code>
@oeg87 40
http://codepen.io/Geo87/pen/EJvrb

41. “They can be a great people,
$Kal-El, they wish to be. They only
lack the light to show the way. For
this reason above all, their
capacity for good, I have sent
them you… my only $son”
Jor-El
$son: preprocessor;
$Kal-El: SASS;
@oeg87 41

42. @if $questions == $true {
//please ask
}
@oeg87 42

43. { Thank you }
//and …
@oeg87 43

44. Bibliography
• http://www.comicvine.com/forums/battles-7/who-can-beat-
superman-744764
• http://www.imdb.com/title/tt0348150
• http://www.slideshare.net/adarowski/sassive-aggressive-using-sass-
to-make-your-life-easier-7366267
@oeg87 44