Switching from LESS to Sass

At work we currently use the LESS preprocessor to build our CSS framework and have been finding lots of situations where Sass @extend would help us better optimise our outputted CSS. This is a short write up of the pros and cons of each for our context:

Pro neither

  • We use Bootstrap which is built on LESS but there is a Sass branch
  • The syntax can be easily switched:
    • LESS @ is directly equivalent to Sass $
    • When writing mixins: LESS .border-radius() {} would become Sass @mixin border-radius() {}
    • When using mixins: LESS .border-radius; would become Sass @include border-radius(); OR @extend border-radius();
  • Both have a large community
  • Both are seeing active development, Sass used to be more active but LESS has recently seen a surge in development


  • With regard contributing to the projects: Sass is built with Ruby and LESS is built with JavaScript. Our JavaScript skills are stronger than our Ruby skills
  • As we currently use LESS, no additional work would be required

Pro Sass

  • FireSass (Firefox) and Sass Inspector (Chrome) and powerful debugging tools, nothing like these exist for LESS
  • Auto compile is a standard feature in Sass, WinLESS can auto compile but has problems with @include
  • CSS3 helpers and spriting are built in to Compass
  • Sass is seen as the “jQuery of the preprocessor world” by Jonathan Verrecchia, and the community. Therefore is probably the better choice for personal development
  • Sass @extend can help to optimise our CSS output, massively
  • If statements can be used to keep IE hacks in the context of the CSS module, but then pull them out at build time into a separate CSS file
  • Sass has actual logical and looping operators in the language. if/then/else statements, for loops, while loops, and each loops
  • Sass has nicer @media support as you can name the breakpoints

Sass FYI

  • Putting an underscore before the filename tells Sass not to generate a CSS file
  • Scout is a free GUI compiler but it does not support –debug-info, Compass.app does but costs $10. Command line supports it and is free, but its the command line


Wayne Moir

User Experience Designer