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 mixin
vs..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