On 22/6/2012 Viking Kristof Houben gave a presentation at 'Fronteers' about 'Pre-processing'. The organization 'Fronteers' wants to professionalize the job of front-end web development. It strives for the recognition and support of Dutch speaking front-end web developers. 'Fronteers' unites about 450 front-end web developers in Belgium and The Netherlands. Enjoy! 22/6/2012 Fronteers by Kristof Houben

1. Pre-processing
INCEPTION ALL OVER AGAIN!

2. RIP
ARJAN EISING
He’s not really dead :)

3. Hi, I’m Kristof
@houbenkristof — kristof@treeshadow.be

4. Front-end/design
at Mobile Vikings

5. I’m always up for a
Challenge

6. Run a small firm
CALLED TREESHADOW MEDIA

7. Creative Brewski
TOGETHER WITH @TOMCLAUS & @DENNISJANSSEN

8. LEt’s TALK
CSS

9. "You don’t need a new stylesheet
syntax, CSS is simple and you’re
a moron if you can’t do it."

10. C’est très simple

11. Not that easy to
maintain

12. Stylesheets evolve

13. Simplicity creates
complexity

14. Keep things DRY
DON’T REPEAT YOURSELF

15. we should
Reference to
existing
information

16. "CSS is the weakest link in the web developers
toolbox. The problem goes deeper than CSS’s
lack of variables. Unlike the “function” in
programming, CSS has no fundamental
building block."

17. It’s all about
Abstractions

18. CSS PRIMITIVES HAVE
NO MEANING

19. That’s our job!

20. Abstractions
ARE GROUPS OF PRIMITIVES

21. Abstractions are
not abstract to us

22. We give BUILDING
BLOCKs meaning
SO IT MAKES IT EASIER FOR US TO UNDERSTAND

23. Our
DESIGNS
CHANGE

24. A kitten dies every
time that happens

25. Find & replace
OH PLEASE, DON’T GET ME STARTED!

26. Client: “We want #000 to be #333 but not
the user information underneath my
#bada55 body text, oh while you're at it
could you position absolute that element and
rotate it a gazillion degrees, …
oh, #333 doesn't look that great after all…
Change it back!”

27. You’re screwed

28. What do we
NEED?

29. The interior
decorator!

30. Decorates with
parts

31. He does not make
those parts
LAMPS, TABLES, CHAIRS…

32. PArts for
PArts

33. Oh my god
YOU REUSED A BUTTON!

34. When elements are common
REUSE tHEM!

35. Focus!
ON WHAT IS IMPORTANT,
YOU MUST!

36. Hard to upgrade
Customized third
party stylesheets

37. Clearly we are in
need of some
Pre-processing

38. "In computer science, a preprocessor is a
program that processes its input data to
produce output that
is used as input to another program.”
— Wikipedia

39. Syntactic
CUSTOMIZED SYNTAX, EXTEND THE LANGUAGE, ADD
IMPROVEMENTS

40. ex. SASS & LESS

41. Keeping things
maintainable

42. SASS
BY HAMPTON CATLIN & NATHAN WEIZENBAUM

43. Written in Ruby

44. Don’t worry, there
are also GUI’s

45. Watches folders &
compiles on save

46. 2007
ORIGINAL SASS SYNTAX

48. Hard to convert
existing CSS TO SASS

49. 2010
SASS 3 INTRODUCES SCSS

51. Regular CSS
=
VALID SCSS

52. BUT WAIT there’s also
COMPASS

53. It’s chock full of
the web’s best
reusable patterns.

56. Also contains other
cool features
IMAGE SPRITING, COLOR FUNCTIONS

59. LESS
You say

60. It’s all javascript
ORIGINALLY WRITTEN IN RUBY BY ALEXIS SELLIER

61. Regular CSS
=
VALID LESS

62. LESS INSPIRED SCSS

63. LESS
VS
SASS
Thanks to Chris Eppstein - https://gist.github.com/674726

64. Learning curve
YOU HAVE TO KNOW JACK SH*T ABOUT THE CLI

65. CODEKIT IS HOT!

66. CSS3 Helpers
SASS HAS COMPASS, LESS DOES NOT

67. Variables

69. Mixins

70. Extending

71. Custom units in
SASS
MAKING THE LANGUAGE MORE FUTUREPROOF

72. Looping

73. DEMO

74. Thank you!

75. Resources:
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-
comparison-to-sass/
http://sonspring.com/journal/sass-for-designers
http://css-tricks.com/sass-vs-less/
http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-
matters/

76. Questions?