Sass and Less

Posted June 17, 2009

There’s been a lot of buzz recently about the release of Less, a new CSS preprocessor created by Alexis Sellier. It takes a lot of inspiration from Sass: it supports variables, arithmetic, nesting, and mixins, although none to the full degree of power that Sass allows.

There are two things that Less offers that Sass doesn’t: implicit mixins and a syntax that’s closer to CSS. Implicit mixins just mean that every class defined in a Less file can be used as a mixin. This means that when designers discover that they want to re-use a class, they can skip the step of refactoring it into a mixin.

The syntax is what’s really getting people excited, though. Unlike Sass, which has its own nested syntax, Less builds on existing CSS syntax, using brackets and semicolons rather than indentation and newlines. The variables are more familiar for Ruby developers, too, being prefixed with @, rather than !.

Sass has always cared about making the syntax as friendly and easy-to-use as possible. This is why we have the indentation syntax: it reflects the structure of the CSS, and a lot of people really like that. But the huge response to Less proves that a lot of people really hate it, as well.

That’s why, for Sass 2.4 (the release after the upcoming one), Sass will become a superset of CSS. The indentation syntax will always be valid, but we will also support brackets in place of indentation and semicolons in place of newlines.

We’ve also been planning for some time to make the variable syntax nicer. As of Sass 2.2, we’ve deprecated implicit strings; that is, margin = !foo "auto" is allowed, but margin = !foo auto is now deprecated. This means that as of 2.4, we can allow variables without any prefix character: margin = foo "auto".

Finally, since it seems like a nifty feature, we’ll also support arbitrary classes as mixins.

There’s reason to try out both Sass and Less. For some people, the syntax and new ideas in Less are most important. For others, the power and maturity of Sass are better. Hopefully as time goes on, both projects will continue to learn from each other and grow to serve the needs of CSS designers as well as possible.

Nicholas Orr said June 18, 2009:

Less looks neat.

However after using sass/haml for a while now. I like the way sass does its syntax. Maybe if I didn’t use haml and saw both sass & less for the first time I’d choose less.

I like the ideas in Less and as you’ve said some will be supported in sass, I’m going to stick with sass.

Cheers :)

cs said June 18, 2009:

I’ve also got used with haml/sass syntax and never want going back to css.

Joe Grossberg said June 18, 2009:

“This is why we have the indentation syntax: it reflects the structure of the CSS, and a lot of people really like that. But the huge response to Less proves that a lot of people really hate it, as well.”

You are firmly in the “gets it” category. I love the concept of SASS; I loathe that I have to learn yet another syntax to use it.

I truly appreciate your insightfulness—it’s like you read my freaking mind!

FWIW, at Intridea, there are basically two camps: people who love SASS and people who would love SASS if it looked more like normal CSS.

You really hit the bulls-eye with this one.

Jeremy McAnally said June 18, 2009:

Awesome man. I’m looking forward to it. The sole reason I don’t use Sass is that I don’t really just don’t want to shift gears into an unfamiliar and (to me, since I’ve been doing CSS for so long) unnatural syntax so often.

Big props for responding to user feedback!

David Dollar said June 18, 2009:

Keeping the syntax closer to CSS may allow you to better use tools like CSSEdit if I’m not mistaken.

Carsten Nielsen said June 18, 2009:

I love Sass, I love the indentation sensitivity, not having to use curly braces and semicolons. Is Sass really all that difficult to pick up? I mean seriously… wtf.

.post-title h2 {
  color: #d00;
}
.post-title h2
  color: #d00

That does not look all that foreign to me, I think some people get a bit carried away with the & construct in Sass which can make things a bit difficult to follow, but if used properly I find it increases readability.

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a
  text-decoration: none
  &:hover
    text-decoration: underline

I guess I just don’t understand how it is so different from CSS, all of the properties, selectors and rules are exactly the same. I think these new features for Sass are fantastic, but I don’t think Sass is difficult to use or understand in it’s current state either.

Chris White said June 18, 2009:

The overwhelming and single value of Less and CSS syntax compatibility is broader adoption especially by CSS editor providers. It’s a lot easier to convince developers of products like CSSEdit to add Less functionality to their editors if the syntax fits into the way customers expect rather requiring the adoption a non-standard syntax used by a specialized audience.

SASS is amazingly cool and like many projects emanating from the Ruby/Rails world that have changed things for the better, may it’s influence propagate just as well…

ste said June 19, 2009:

I don’t think that maintaining “compatibility” with CSS syntax is such a good idea… nested rules and mixins (as implemented by Less) are not valid CSS and they do not play well with tools like CSSEdit. So what do you get? You lose Sass’ terseness and simplicity, and gain nothing (you still cannot use dedicated editors). Unless there are some other benefits which I’m not aware of, it doesn’t look like a good idea.

Nathan said June 19, 2009:

The largest gain isn’t the possibility of editor support (Chris is right, this will be easier for a superset syntax) but adoption. The responses to Less and to this post have made it clear that there are a lot of people who want the sort of power Sass offers without the syntactic difference with CSS.

Adam said June 19, 2009:

Thanks you guys!

I’m very happy to hear that Sass is responding to the community and “keeping up” with the fast moving members. It’s great to see sass borrowing some of the other interesting and good features.

We just migrated our existing site over to sass and I must say I am quite happy to hear you guys responding and acting so quickly. This definitely reconfirms that we switched to the right tool. (besides the great features!)

MadsBuus said June 22, 2009:

Hi Nathan,

I’m a newly started SASS user, and like it very much so far. Unfortunately not all my projects are Rails, so I found ways to use SASS anyway. I’ve set up an eclipse builder, hacked a bit on the colorer plugin to have simple SASS syntax highlighting.

Ofcourse the builder is not very keen on imports, so I had to ‘touch’ the master files before includes were properly picked up.

I did a varaint of the sass command line script called msass that takes a lot of files and an output dir and just puts every file in that dir with a .css suffix.

But i found a ‘whops’ in haml/exec.rb where suddently ARGV is reused in a few places instead of the supplied @args (look in the process_result method).

I just changed them to @args and so my msass works. Consider adding more switches to that one, or maybe support looking for reverse ‘import’ statements to compile also.

Less looks somewhat nice (The bigger bugger in my SASS is clearly forgetting the equal sign when refactoring values’), but I would rather not make people think less was actually valid CSS.

Thanks, Mads

Nathan said June 22, 2009:

Mads,

I’ve fixed the ARGV issue. Thanks for reporting that.

We’re planning to add functionality for updating an entire directory to Sass 2.4.

CLR said June 22, 2009:

Nathan,

Please contact me regarding standardizing the SASS syntax. I have SASSIJS which is based on the pre-2.2 syntax, and I need a stable target to shoot for. BTW, SASSIJS obviates many of the IDE concerns, because a .sass template can now be loaded directly into a web page, allowing the graphic designer to see the results of the SASS without the compilation step.

Thanks! -CLR

Anonymous said July 01, 2009:

sass’ already so great, what’s the point here ? i don’t get it… fork it and make your own !

Trevor Turk said July 25, 2009:

This is great news. Having that backwards-compatible syntax will be a big win. Thanks!

River Brandon said August 07, 2009:

While I agree this is a good move to expand potential users, I have to say that the strictness of sass is one of the qualities I love. As someone who works in a team setting, it’s a great help in making sure our files are authored in a consistent manner, and are easy to parse for multiple developers. Also, when I can do what I want with fewer characters then that’s a win. Sass is very easy to learn, and the streamlined syntax has many benefits.

That said, if it gets more people to use it, great. And once they start using it, remind them to try the sass syntax to unleash the full goodness of sass.

Pedro Teixeira said October 10, 2009:

I love LESS beacause you can use standard CSS and evolve from there.

Check out styled_objects plugin for Rails.

It’s based on LESS.

Beau Smith said October 28, 2009:

When do you estimate SASS 2.4 will be released?

Nathan said October 28, 2009:

It’s hard to tell, since a lot of what has to happen isn’t so much straight coding as figuring out design issues (such as how exactly we want to accomplish a CSS-like syntax). On top of that, the amount of time Chris and I can devote to Sass varies pretty unpredictably.

That said, I don’t want Sass 2.4 to take as long as 2.2 did (for various reasons, there was more than a year between the release of 2.0 and 2.2). The only thing that’s absolutely crucial for 2.4 is CSS-like syntax; there are various other features and improvements I’d like to make, but if necessary I’ll push those back to the 2.6 release. I’m hoping for a release by June at the latest, but hopefully closer to March and possibly even earlier than that.

Beau Smith said October 30, 2009:

Thanks for the notes. I’ve been investing time into Sass (via Compass) but for my next project because I’ll have many peeps who don’t want to learn a new language… they’re pushing for me to use Less. So I’ll probably try it out so that I can have a better understanding of both languages.

If you put out a call for assistance, SASS fans may be more that exited to participate in the design. Heck, I might burn some midnight oil and add to it! There sure seems to be no lack designers with ideas of how CSS can be improved. Perhaps ask people to publish their spec and/or ideas on their website and submit to you for feedback? Or add the specification docs to the GitHub repo and peeps can fork it (those not wanting to learn Git can just edit via GitHub’s web interface!). Many options for developing a specification for the syntax.

Another simpler idea…. why not crib directly from Less?

Nathan said October 31, 2009:

In general, Chris and I don’t entirely agree with a lot of the design choices made by Less—certainly not enough to be comfortable taking them without any further consideration. There’s a similar problem with crowd-sourcing: no matter what design decisions people come up with, Chris and I will have to review them, which will take time. Probably not a whole lot less time than talking through the issues ourselves.

As for your work, I’d encourage the idea that Less isn’t any less of a new language than Sass is. The syntax is minorly more similar to CSS, but the translation between CSS syntax and Sass syntax is basically trivial anyway. All the new functionality in Less is just as new as it is in Sass. In addition, I plan to include with 2.4 a tool to convert whitespace-style Sass into CSS-style Sass, so that shouldn’t be an issue in the future.

Beau Smith said November 09, 2009:

Good points. Thanks for your thoughts Nathan.

Renato Carvalho said February 07, 2010:

I love SASS and have to say that it’s difficult work on projects without it now.

The only problem is when we want to use it on non rails projects. It would be great if there were something to compile the CSS automatically. Like compass do. But it would be even better if we had one app for that, like some guys did for LESS, the LESS.app http://incident57.com/less/

This idea would be great and I think it would help a lot. Cheers

Nathan said February 07, 2010:

Renato: Sass has auto-compile functionality available right now in the master branch. Check out my recent blog post about it. As for a graphical interface, we intend to create one (that will be cross-platform and open-source, unless Less.app) after we release Sass 3.

David Rivers said July 23, 2010:

Are there any plans to add “implicit mixin” functionality to Sass? This sounds like a very useful feature.

Nathan Weizenbaum said July 23, 2010:

David: Sass 3 supports @extend, which is much more powerful than merely treating classes as mixins.

I don’t agree that actually treating classes as mixins directly (the way Less does) is a good idea. It encourages messy styles, where some classes are semantic and meant to be used in the document, and others are non-semantic and only meant to be used as mixins. Keeping the two separate makes this much clearer.

If you do want to re-use the semantic styles provided by classes, then @extend is perfect, because it fully preserves the meaning of the class.

Make your comments snazzy with Textile!