Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fronteers talk Digiti — "Pre-processing"

Fronteers talk Digiti — "Pre-processing"

SASS, COMPASS & LESS

Ed0bc121c5e4e87603d31fcd2268402c?s=128

houbenkristof

June 22, 2012
Tweet

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

  47. None
  48. Hard to convert existing CSS TO SASS

  49. 2010 SASS 3 INTRODUCES SCSS

  50. None
  51. Regular CSS = VALID SCSS

  52. BUT WAIT there’s also COMPASS

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

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

  57. None
  58. None
  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

  68. None
  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?