Talk on CSS Preprocessors from Creative Coders in Singapore

1. CSS Preprocessors

2. Ed Moore
twitter: @_edmoore
gplus: +EdMoore
github: eddiemoore

3. CSS is Awesome

4. Single Element

5. FIRE

6. CSS SUCKS

8. CSS3 not consistant across browsers
Modularisation sucks
Hard to stay DRY
No Variables*

9. Vendor Prefixes
‐webkit‐whatever: something
‐moz‐whatever: something
‐o‐whatever: something
‐ms‐whatever: something
whatever: something

11. Enter CSS Preprocessors

14. Any valid CSS file is a valid SASS/LESS/Stylus file

15. Variables

16. SASS
$primaryColor: #BADA55;
a {
color: $primaryColor;
}

17. LESS
@primaryColor: #BADA55;
a {
color: @primaryColor;
}

18. Stylus
primaryColor = #BADA55
a
color: primaryColor

19. Nesting

20. .module {
width: 500px;
a {
color: red;
}
ul {
li {
display: inline‐block;
a {
color: pink;
}
}
}
}

21. .module {
width: 500px;
}
.module a {
color: red;
}
.module ul li {
display: inline‐block;
}
.module ul li a {
color: pink;
}

22. Avoid inception

23. Only go 3 levels deep

24. BAD
#mything .module .something ul li a { ... }

25. Partials

26. Break up your styles
@import 'base/reset';
@import 'base/typography';
@import 'layout/grid';
...

27. Functions

28. @mixin box‐shadow($top, $left, $blur, $color) {
‐webkit‐box‐shadow: $top $left $blur $color;
‐moz‐box‐shadow: $top $left $blur $color;
box‐shadow: $top $left $blur $color;
}
div {
@include box‐shadow(2px, 2px, 5px, rgba(0,0,0,0.3));
}

29. div {
‐webkit‐box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);
‐moz‐box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);
box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

30. Maths Operations

31. .col‐1‐2 {
width: (100% / 2);
}
.col‐1‐3 {
width: (100% / 3);
}
.col‐2‐3 {
width: (100% / 3) * 2;
}

32. .col‐1‐2 {
width: 50%;
}
.col‐1‐3 {
width: 33.33333%;
}
.col‐2‐3 {
width: 66.66667%;
}

33. Extending / Inheritance

34. .foo {
color: red;
}
.bar {
@extend .foo;
}

35. .foo, .bar {
color: red;
}

36. Referencing Parent Selectors

37. a {
color: red;
&;:hover {
color: pink;
}
}

38. a {
color: red;
}
a:hover {
color: pink;
}

39. a {
color: red;
.module &; {
color: green;
}
}

40. a {
color: red;
}
.module a {
color: green;
}

41. Colour Functions

42. button {
background: #000;
&;:hover {
color: lighten(#000, 20%);
}
}

43. button {
background: #000;
}
button:hover {
background: #333333;
}

44. Loops

45. $total‐columns: 6;
$col‐widths: ();
@for $i from 1 through $total‐columns {
@for $j from 1 through $i {
$w: ($j/$i);
@if index($col‐widths, $w) == false {
.col‐#{$j}‐#{$i} {
width: $w * 100%;
}
$col‐widths: append($col‐widths, $w, comma);
}
}
}

46. .col‐1‐1 { width: 100%; }
.col‐1‐2 { width: 50%; }
.col‐1‐3 { width: 33.33333%; }
.col‐2‐3 { width: 66.66667%; }
.col‐1‐4 { width: 25%; }
.col‐3‐4 { width: 75%; }
.col‐1‐5 { width: 20%; }
.col‐2‐5 { width: 40%; }
.col‐3‐5 { width: 60%; }
.col‐4‐5 { width: 80%; }
.col‐1‐6 { width: 16.66667%; }
.col‐5‐6 { width: 83.33333%; }

47. Utilities

48. Sass
Compass
Susy

49. Stylus
Nib

50. Less
Less Hat

51. How the *!@$ do I turn all that into CSS?!?

52. Embrace the command line

54. Tools

55. LiveReload

56. CodeKit (OSX only)

57. Compass.app

58. Scout

59. Prepros

60. Koala

61. Less.app (OSX only)

62. Crunch! (Less)

64. Future

65. CSS Variables
:root {
‐‐main‐bg‐color: brown;
}
.one {
background‐color: var(‐‐main‐bg‐color);
}
Note: The custom property prefix was var- in the earlier spec, but later changed to --. Firefox 31 and above follow the
new spec.
Mozilla
Can I Use

66. Myth
CSS the way it was imagined.
Myth.io

68. Ed Moore
twitter: @_edmoore
gplus: +EdMoore
github: eddiemoore
slides: http://bit.ly/1gQqRoe