Fronteers talk Digiti — "Pre-processing"

SASS, COMPASS & LESS

Transcript

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. You say LESS
60. It’s all javascript ORIGINALLY WRITTEN IN RUBY BY ALEXIS SELLIER
61. Regular CSS = VALID LESS
62. LESS INSPIRED SCSS
63. VS LESS 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?