Convert Less to SCSS

I haven’t been posting most of the minor RC releases of Haml and Sass to this blog since they only contain bug fixes and usability improvements, which (while important) aren’t very exciting. However, there were fewer bug reports than I anticipated, so I’ve had a little time to work on something extra a couple people have requested: a Less to SCSS converter.

This is being added to sass-convert as part of RC 4, released just now. It is violating the feature freeze, I admit, but since it’s so orthogonal to the rest of the project I don’t think it’ll be a problem. To get it and use it, run:

# Install Sass 3.0.0.rc.4
gem install haml --pre
# Convert all .less files to .scss
sass-convert --from less --to scss --recursive path/to/stylesheets

The conversion is done using Less’s parser, so the less RubyGem should be installed. Presumably it’ll already be there for most people doing the conversion, though.

Incompatibilities

Because of the reasonably substantial differences between Sass and Less, there are some things that can’t be directly translated, and one feature that can’t be translated at all. In the tests I’ve run on open-source Less stylesheets, none of these have presented issues, but it’s good to be aware of them.

First, Less doesn’t distinguish fully between mixins and selector inheritance. In Less, all classes and some other selectors may be used as mixins, alongside more Sass-like mixins. If a class is being used as a mixin, it may also be used directly in the HTML, so it’s not safe to translate it into a Sass mixin. What sass-convert does instead is leave the class in the stylesheet as a class, and use @extend rather than @include to take on the styles of that class. Although @extend and mixins work quite differently, using @extend here doesn’t actually seem to make a difference in practice.

Another issue with Less mixins is that Less allows nested selectors (such as .body .button or .colors > .teal) to be used as a means of “namespacing” mixins. Sass’s @extend doesn’t work that way, so it does away with the namespacing and just extends the base class (so .colors > .teal becomes simply @extend .teal). In practice, this feature doesn’t seem to be widely-used, but sass-convert will print a warning and leave a comment when it encounters it just in case.

Finally, Less has the ability to directly access variables and property values defined in other selectors, which Sass does not support. Whenever such an accessor is used, sass-convert will print a warning and comment it out in the SCSS output. Like namespaced mixins, though, this does not seem to be a widely-used feature.