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

css sass less

50,085

Solution 1

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:

Why should you make all your users compile your stylesheets when you can do it once for all of them.
What would your site look like if JavaScript is disabled.
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.

Solution 2

Since visionmeda/sass.js isn't available anymore and scss-js hasn't been updated in 2 years, I might interest you in sass.js. It's the C++ library libsass (also used by node-sass) compiled to JavaScript using Emscripten. An implementation to compile scss stylesheets linked or inlined in html can be found at sass.link.js.

Try out sass.js using the interactive playground

Solution 3

YES

As we were expecting, after rewriting it on C++, it is possible to compile it in Javascript via Emscripten.

This is browser version: https://github.com/medialize/sass.js/

As they recommend, for node you can use this one: https://github.com/sass/node-sass

Solution 4

I just discovered an interesting Sass.js Playground. A few things may have changed over the years. Check this out:

http://medialize.github.io/playground.sass.js/

Solution 5

You definitely shouldn't make all of your users compile stylesheets, however a javascript implementation can run on the server as well. I'm also looking for a javascript sass implementation - to use in a node.js app. Is this something the sass team is considering?

View more solutions

50,085

Jiew Meng

Web Developer & Computer Science Student Tools of Trade: PHP, Symfony MVC, Doctrine ORM, HTML, CSS, jQuery/JS Looking at Python/Google App Engine, C#/WPF/Entity Framework I hope to develop usable web applications like Wunderlist, SpringPad in the future

Updated on July 08, 2022

Comments

Jiew Meng almost 2 years
I have used LESS.js before. It's easy to use, something like
```
<link rel="stylesheet/less" href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>
```
I saw SASS.js. How can I use it in a similar way? Parsing a SASS file for use immediately in HTML. It seems like SASS.js is more for use with Node.js?
```
var sass = require('sass')
sass.render('... string of sass ...')
// => '... string of css ...'

sass.collect('... string of sass ...')
// => { selectors: [...], variables: { ... }, mixins: { ... }}
```
- Hauleth over 11 years
  
  For production it is root of evil, for development you have sass watch.
- Maya Kathrine Andersen over 10 years
  
  I like the idea since the problem with "sass watch" is that you sometimes test the page accidentally before "sass watch" has gotten to run. With less.js you kan load the page an be sure that the css has been compiled when you see the page. Of course only in the dev environment.
- Dan about 10 years
  
  Check out SassMeister: sassmeister.com - a free online SASS compiler
- LukyVj almost 8 years
  
  There is, indeed, sass.js
- Zardoz89 almost 4 years
  
  @Hauleth sass watch (like less watch) sometimes isn't an option. Specially when your source files are handled by a third party build/dependency and you only can have the full source files when you are packing or deploying your web app and deploying its slow. (ie...java web apps)
gix over 13 years

Client-side compilation is nice
Josef Richter about 13 years

my use case: developing html+css template which will be put into rails project. would be nice to have sass.js for localhost development purposes so that I don't have to fiddle with server stuff.
montrealmike almost 13 years

There are many cases in which client-side compilation is useful. For instance, if you want to let users play with the look of their page and only save the result they choose back to the server.
Graza over 12 years

I 100% agree with chriseppstein (why the hell do you want users to compile stylesheets), not covered here, plain and simple: development. All my deployed js code I want to be minified and compressed, as with my css. But during development, it helps to have access to the code rather than "compiled" version. I'm not sure I speak for all front-end engineers, but I can say that a hell of a lot of us use our browser and an editor as the only tools required during the development phase. I don't want to have to "compile" sass/scss during development. Deployment/CI/Production are a different matter
Jason about 12 years

I'll add another pre-production scenario to the two already mentioned: I need my UX guy to be able to prototype style changes on his own and then feed improvements back into the developers.
Sri Gandhi almost 12 years

In addition to @JosefRichter's use case, I'll add the slightly less common but possibly quite interesting possibility that there may be a browser vendor or two that would find it easier to integrate directly into browser-based live editing tools. This kind of support in-browser doesn't exist today, but I for one would like to see it (and have some amount of influence in the matter) and I think it would actually be good for the adoption of SASS. LESS would have an advantage there today.
Dan almost 12 years

To throw something in on the authors side; I would like to consider using SASS but I dont use nor do I want to use Ruby; hence a client side solution is preferable to none. Writing it in Ruby restricts its use to only ruby users; if it was written in JS it could have been used on clients or on server (with node, classic asp, asp.net and possibly others).
Smilediver almost 12 years

a JavaScript implementation could also be used server side with node/rhino etc. without having to have a dependency on ruby
jayarjo over 11 years

This looks like a node js module? Original question was a bout client side implementation, no?
Christian over 11 years

I heartily agree with the opinion that there is a valid use case for client-side compilation. I love Ruby but there are tons of web people who don't use it, or find it too complicated and unnecessary for what they do. A client-side compiler would really make SASS usable for this type of web person. Of course they would want to link to the compiled CSS for production, but it makes tons of sense for development. I honestly think this is one area where LESS has a leg up on SASS.
A. Matías Quezada over 11 years

I don't want to use SASS.js to production! I want to be able to deploy a develop machine without need to install ruby just for SASS. Once the development is done I can process the SASS on any machine and move the result CSS to production server.
Hauleth over 11 years

IMHO the Sass and SCSS development with watch is much better than LESS.js, less bugs, faster and can be easily controlled from terminal.
Heilemann over 11 years

Dynamic client-side variables.
airtonix almost 11 years

If you need dynamic client side variables, then you need to rethink your styles. Account for the fact that you'll be using a client side stylesheet with more specific selectors. YOu don't need sass for this.
airtonix almost 11 years

I suggest you look at using Stylus instead of sass on Node projects.
jpic over 10 years

The design person who codes CSS for us hacks files directly on our dev server, using an sftp client. Which means that he can't run anything. Which means that (s)he is blind in case of syntax error. A client-side compiler with debug mode like less.js would have permitted us to switch to sass easily.
Grallen over 10 years

I see a use: I would use a client-side compiler only while writing the page, then move the SASS out of the page and make a final compile to .css that I go live with. Sometimes it's easier to write a quick <style> after the element when testing an idea. It's faster than finding the point to edit in 2000 lines of SASS in the external. A client side in-page compiler would make it so I don't have to write it in CSS the first time, then edit it to SASS when I move it out 10 minutes later.
user1778770 about 10 years

A reason to have sass implemented in anything different from ruby would be some for unlucky guy who can't use ruby in his machine for some "murphytious" reason :(
JackMahoney about 10 years

A javascript SASS compiler is definitely useful. I came here looking for one so that I could write a Grunt plugin for instance.
Tom almost 10 years

-1 because SASS.js code could leverage gulp/grunt and node (or a million other development/build tools for that matter). JS is not a client side only language. The few points you gave made incorrect assumption about JS.
stevemao over 9 years

If you want to let users play with sass on their browser, try node-sass with browserify. Use at your own risk!
Raja over 8 years

if someone would write an implementation of Ruby in Javascript, then we wouldn't have to port and maintain projects between languages like this. @Dan
Raja over 8 years

Now we just need a C++ to Ruby compiler and we can unify the codebase.
Asken over 8 years

I definately think a client compiler is needed for sass scss. 1) Browsers don't compile more than once anyway (for less at least). It might not be the primary use but I can definately see myself needing it. 2) Isn't that what the noscript-tag is for? In 100% of the cases I'm not interested in those users. 3) Set up a build server to create stylesheets if needed and use those for production. I'd rather just be able to do development not using any additional resources.
Sandro over 8 years

This is getting more important now as Bootstrap 4 will switch to SASS. Because many live theme customizer need something to build on like demo.virtuosoft.eu/live-less-theme-customizer/doc/index.html github.com/pikock/bootstrap-magic and others
Simon Ferndriger almost 8 years

We use client side compilation for our development environment, of course, we switch to server side compilation for the live version - which is way faster of course - but realtime preview is a must-have for development environment in my opinion.
Ferdinand Prantl over 7 years

Another use case is an application using RequireJS. There is no compilation and/or watching during development. Source files are loaded by the browser as-is and if they need compilation or other special handling , it is performed by a RequireJS plugin. Server-side compilation takes place only for the production application version. See require-less or require-css.
Anirudha almost 7 years

sass.js seems to be considerably huge in size 670KB(gzipped) compared to less.js 143kb size(gzipped). also i don't see any option in sass.js to dynamically set css variables compared to less.js. this is really useful when you have theamable site
plaidcorp almost 7 years

This is more of a opinion piece than an answer. It doesn't take into account any use cases sans one: production, in which client side compiling should obviously not be used for all the reasons listed. The solution I want to provide with a client side compiler is similar to the example @montrealmike has given.
plaidcorp almost 7 years

A combination of this and the (currently accepted) answer should be the actual accepted answer.
DUzun over 3 years

I wanted to write SASS on repl.it, and came up with a solution to compile it in the browser: 1. Add <link type="text/scss" href=... /> to HTML 2. Find all link[type="text/scss"] elements and fetch their href's over AJAX 3. Use github.com/medialize/sass.js to compile SASS -> CSS 4. Replace the link with a <style /> containing the compiled CSS. The result: minesweeper.duzun.repl.co