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

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.