Is There a Sass.Js? Something Like Less.Js

Is there a SASS.js? Something like LESS.js?

There is no officially sanctioned JavaScript implementation of sass or scss. There are a couple of implementations in progress that I've seen, but none that I can recommend using at this time.

However, please a few points:

1. Why should you make all your users compile your stylesheets when you can do it once for all of them.
2. What would your site look like if JavaScript is disabled.
3. If you decide to change to a server-side implementation at a future time, all your templates must be changed accordingly.

So while it's a little more setup to get started, we (the sass core team) think that server side compilation is the best long term approach. Similarly, the less developers prefer server side compilation for production stylesheets.

Ampersand in Less.js vs. SCSS

I don't think you can do the body.admin & thing with LESS. Probably not a bad thing, because it's confusing.

For > (child selector), see: Less.js - strong nested rules?

See: http://tinkerbin.com/H3wUpFMj (change the CSS format to "Less", then press "Run")

It's as simple as this:

.A {
    > .B {
        width: 50px;
    }
}

How can we use sass to to evaluate javascript?

No as Sass is evaluated before sending to client. Less can be send as is and evaluate on client side, and then you can evaluate JS like window.main_color. But IMHO it's bad idee because it can provide some WTF when someone display it.

less css server-side, but without node.js?

You could take a look at SCSS. The compilation of files into CSS is done by a Ruby script which is very easy to get set up (even on Windows), and the syntax and feature list is almost identical. I'd even say that the documentation of SCSS is better than LESS.

That said, I have managed to get LESS compilation running locally by running the file in a Javascript engine (in my case, Komodo Edit's macro system is powered by Javascript, but it could work with Rhino or V8). You do have to modify the source a little, to simulate the window object. I got a lot of help by looking at the code of the Less Engine project, which basically allows Less to be executed within a JVM.

Can HAML be used with Less.js?

The short answer is yes. The major pitfalls at the time I asked this question seemed to be around the ease of having LESS precompiled vs. Sass. Good solutions exist for this now, and it's no longer a major barrier either way.

LESS.JS Redundancy in CSS, Use of Mixins instead of selector inheritance?

I think there are a few issues to consider:

• Size of the style sheet
• Efficiency of style sheet execution (how fast the browser executes)
• Maintainability of the style sheet
• Maintainability of the markup (html)

The approach that Mark Gemmill advocates (in /3) is really Nicole Sullivan's Object Oriented CSS. I used that pattern before switching to Sass, and still find some of it useful, but I think the Sass/Less way results in more maintainable CSS and more maintainable markup - there is no need to sprinkle presentational classes throughout the markup.

I think @extend (selector inheritance) is one of the main advantages that Sass has over Less and does reduce the redundancy in the compiled style sheet.

To me, the benefits of more maintainable CSS and markup outweigh any downside of a slightly larger style sheet. I think you'll find that if you keep your selectors efficient (don't nest in Less/Sass more than you need to) and combine and minimize in production the performance hit will be less than you might imagine.

Browser SCSS processor?

Is there just a Browser JS file than I could include on my page and
load unprocessed SCSS?

I don't think so. I've tried pretty much all the CSS preprocessors out there, and the only one I know that works in the browser is LESS.

There are a couple of Win/Mac/Air/Node apps to pre-process different standards while on dev tho:

• http://winless.org/
• http://crunchapp.net/
• http://compass.handlino.com/
• http://wearekiss.com/simpless
• http://drzaus.com/plugins/sassifier-followup-make-sass-compiler-its-own-plugin

---

Related Topics