Do CSS pre-processors produce more efficient CSS code?

Question

By efficient I mean less code (less css rules).

Because I'm converting a CSS file to less, and I'm surprised to find out that the compiled CSS file is quite small (I haven't finished yet :P)

Answer 1

It really depends how you structure your code in LESS. The compiled output can become quite unwieldy if you use a lot of mixins (for example for gradients) or the @ operator to nest selectors too liberally.

All in all one could argue that they 'can' produce more efficient code if used properly. But then, so can you I you use plain CSS.

Answer 2

LESS (when compiled) and Sass both minify your CSS. In addition to stripping out whitespace, you'll sometimes see things like border: 0 10px 0 10px get turned into border: 0 10px or colors like #666666 turned into #666. It isn't any more efficient, but it does make a smaller download for the user (which is valuable for mobile devices).

That said, Sass has a unique directive called @extend, which allows you to group your styles logically in the pre-compiled state, but will group them together to avoid duplication in the compiled state.

.classA { color: blue }

// 50 lines of code defining other elements...

.classB { @extend .classA }

Will output something that looks like this:

.classA, .classB { color: blue }

It doesn't seem like that big of a deal with 2 classes only having one thing in common, but its a bigger deal the more elements you are using and the more things they have in common.

Otherwise no. The efficiency is entirely based on the author.