Geek Answers Handbook

Performing using LESS and SASS

I use Yahoo Best Practices to speed up my sites ( http://developer.yahoo.com/performance/rules.html ), but how do LESS and SASS CSS structures affect performance? Are they slower or faster than files with direct miniature CSS?

+8
performance css less sass
source share
2 answers

LESS and SASS simplify CSS writing and management with powerful features such as functions, variables, and mixins, but since they compile before CSS before deployment, they have no effect on performance. Your performance is based solely on CSS output, which can be well appreciated.

You may have LESS running on the client using a javascript interpreter such as less.js, but I don't see a good reason for this yet. This is slower (obviously) and almost certainly more due to the requirements of the javascript library.

+18
source share

I agree with @JTolley: The great advantage of SASS / LESS over CSS is its increased developer productivity. You can just do a lot more with less code and keep your project structured and beautifully formatted.

@import

If you split style sheets into multiple documents, SASS / LESS preprocessors compile the code into a single CSS file. Importing instructions in simple CSS will result in several requests. Yahoo Best Practices:

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

file size

A style declaration in SASS / LESS will not matter compared to a declaration in simple CSS: they are both CSS. But then again, it’s much easier for me to work beautifully and structured with the framework. Variables, nesting, mixins, and selector inheritance help me to better code and end up with a smaller file size.

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

Switching from simple CSS to SCSS and back is easy. CSS is valid. SCSS and SCSS will output CSS.
So give it a try.

+5
source share

More articles:


All Articles