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
- (
++) 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, includingcompressed - (
|) It may be a matter of style, but to me the syntax is a little bit more explicit and therefore better readable (@mixin mixinvs..mixin). - (
--) Pre-compilation is required, even when in development. Watch daemons are available but add complexity.
- (
++) 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.
- 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.
There are a number of CSS frameworks for both SASS and LESS.
SASS:
LESS:
- Bootstrap (formerly Preboot)
- Bootstrap by Twitter