Skip to content

Instantly share code, notes, and snippets.

@trkoch
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.
SASS vs. LESS

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