Performance of using LESS and SASS

Question

I use Yahoo's Best Practices for Speeding Up My Websites (http://developer.yahoo.com/performance/rules.html), but how do the LESS and SASS CSS frameworks affect performance? Are they slower or faster than straight minified CSS files?

Answer 1

I agree with @JTolley: The big advantage of SASS / LESS over CSS is the increase in developer performance. You just can do a lot more with less code and keep your project structured and nicely formatted.

@import

If you split your stylesheets over multiple documents, the SASS / LESS pre-processors compile code into a single CSS file. Import statements in plain CSS will result in multiple requests. Yahoo Best Practices:

Reducing the number of HTTP requests in your page is the place to start.

File size

A style declaration in SASS / LESS compared to a declaration in plain CSS won't make a difference: they are both CSS. But then again, I find it a lot easier to work nice and structured with a framework. Variables, nesting, mixins and selector inheritance help me to code better and end up with a smaller file size.

Note: Nesting a lot will create long selectors. Long selectors need more rendering time.

The move from plain CSS to SCSS and back is easy. CSS is valid SCSS and SCSS will output CSS.
So give it a try.

Answer 2

LESS and SASS both make CSS easier to write and manage due to powerful features like functions, variables and mixins, but since they compile down to CSS before deployment they don't affect performance in the slightest. Your performance is based solely on the CSS output which can be minified just well.

You CAN have the LESS run at the client using a javascript interpreter like less.js, but I've yet to see a good reason to do so. It's both slower (obviously), and almost certainly larger due to the javascript library requirement.