SASS/LESS

sass-less.md

Thoughts on using SASS or LESS

• http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

• (audio) SASS & LESS, the new CSS? (August 26, 2011) http://thinkvitamin.com/tvr/episode-32-sass-less-the-new-css/

• (slides) CSSOM, Vars, Mixins, etc. (the future of CSS) http://www.xanthir.com/talks/2011-01-12/slides.html (blog version: http://www.xanthir.com/blog/b49w0)

• (article) SASS For Designers http://sonspring.com/journal/sass-for-designers

• Twitter's Bootstrap diff converted from LESS to SASS: https://github.com/jlong/sass-twitter-bootstrap/commit/e720a604a8ebd9df5581c933b9982c2ca43d00c0#diff-9

• variables: for colors, base urls, etc.

• mixins (SASS: include): small template you can send values to. I.e. for vendor prefixed values

• You can lighten/darken hex colors, etc.

SASS (~2007) http://en.wikipedia.org/wiki/Sass_(stylesheet_language)

• Two syntaxes:

  1. style.sass: whitespace sensitive, curly braces, colons, semicolons
  2. style.scss: different syntax that brings back CSS-like syntax.

• Ruby gem

• included by default in Ruby on Rails (as of version 3.1) https://gist.github.com/958283

• originated with the idea of HAML

• sass watch: can watch files and parse output when they're changed

• compass watch: see above

• multiple files can be combined from multiple stylesheets into one output

• Unofficial blog: http://thesassway.com/ (url looks offensive.. sorry...)

Compass: library/framework/boilerplate built on SASS.

• Comes with base styles, Blueprint (grid framework), etc.
• You can pick and choose elements you want to use.
• Comes with lots of predefined mixins (like predefined vendor prefixes).
• Can be configured to output specific vendor prefixes only: http://compass-style.org/reference/compass/support/

LESS (~2009) http://en.wikipedia.org/wiki/LESS_(stylesheet_language)

• style.less
• compiled by JavaScript (can be run in Node.js)
• advantage: you can access JS objects and the DOM through LESS

More notes on LESS are more than welcome!