Skip to content

Instantly share code, notes, and snippets.

@trkoch

trkoch/sass-vs-less.md

Created October 14, 2011 12:49
Show Gist options
  • Save trkoch/1287017 to your computer and use it in GitHub Desktop.
Save trkoch/1287017 to your computer and use it in GitHub Desktop.
Download ZIP
SASS vs. LESS
Raw
sass-vs-less.md

SASS vs. LESS

What they have in common

SASS (.scss) and LESS share most of the features. The syntax is very similiar.

Key Features:

  • Variables
  • Nesting
  • Selector inheritance
  • Parameterized mixins
  • Operators
  • Color functions

SASS compared to LESS

  • (++) Conditionals and control structures
  • (++) Python implementation available (pyScss)
  • (+) Better unit handling. Has conversion tables and handles unknown units.
  • (+) Greater variety of 3rd party tools and extensions (e.g. Firesass)
  • (+) More active project in terms of recent commits
  • (|) Pretty heavy dependencies when it comes to the original implementation. Ruby along with some standard packages is required.
  • (|) Output styles, including compressed
  • (|) It may be a matter of style, but to me the syntax is a little bit more explicit and therefore better readable (@mixin mixin vs. .mixin).
  • (--) Pre-compilation is required, even when in development. Watch daemons are available but add complexity.

LESS compared to SASS

  • (++) Light dependencies. Written in JavaScript!
  • (+ ) No pre-compilation required, can be run in browser
  • (+ ) JavaScript environment can be accessed from LESS files
  • (+ ) Since written in JavaScript, extending LESS (should the need arise) is easier for JavaScript developers.
  • (+ ) LESS has less suprising scoping rules. Variables up the hierarchy are left untouched.
  • (+ ) Namespaces with accessors
  • (-) Node (limited Windows support!) or Rhino is required for pre-compilation
  • (-) Command line utitlity has very few options.

Note on client-side use of LESS

  • For production, it is recommended to compile LESS to CSS. However, LESS is clever enough to cache the compiled CSS files using localStorage. Therefore, in modern browsers, client-side only compilation may be an option. Probably not for mobile though.
  • For development, client-side compilation is a great feature. LESS even provides a watch mode that applies changes to CSS without reloading the page.

Frameworks

There are a number of CSS frameworks for both SASS and LESS.

SASS:

LESS:

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment