115

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: { ... }}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Jiew Meng
  • 84,767
  • 185
  • 495
  • 805
  • 6
    For production it is root of evil, for development you have `sass watch`. – Hauleth Nov 12 '12 at 16:26
  • 3
    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. – Maya Kathrine Andersen Oct 12 '13 at 12:48
  • Check out SassMeister: http://sassmeister.com/ - a free online SASS compiler – Dan Mar 24 '14 at 22:18
  • 1
    There is, indeed, [sass.js](https://github.com/medialize/sass.js/) – LukyVj May 29 '16 at 15:35
  • @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) – Zardoz89 Jul 05 '20 at 20:06

7 Answers7

42

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
chriseppstein
  • 10,453
  • 1
  • 25
  • 17
  • Client-side compilation is nice – gix Jan 06 '11 at 15:26
  • 157
    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. – Josef Richter Apr 04 '11 at 07:29
  • 93
    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. – montrealmike Jun 13 '11 at 20:12
  • 27
    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 – Graza Feb 02 '12 at 21:45
  • 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. – Jason Mar 20 '12 at 18:16
  • 3
    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](https://developer.mozilla.org/en/Tools/Style_Editor). 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. – Kevin Dangoor Jun 18 '12 at 17:14
  • 15
    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). – Dan Jun 26 '12 at 16:47
  • 27
    a JavaScript implementation could also be used server side with node/rhino etc. without having to have a dependency on ruby – Sam Hasler Aug 06 '12 at 11:09
  • 6
    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. – Christian Oct 18 '12 at 18:48
  • 1
    IMHO the Sass and SCSS development with `watch` is much better than LESS.js, less bugs, faster and can be easily controlled from terminal. – Hauleth Nov 12 '12 at 16:25
  • 1
    Dynamic client-side variables. – Michael Heilemann Dec 14 '12 at 15:13
  • 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 Aug 04 '13 at 10:28
  • 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. – jpic Sep 14 '13 at 12:44
  • 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 – Grallen Nov 04 '13 at 18:20
  • 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 :( – user1778770 Mar 10 '14 at 19:54
  • 1
    A javascript SASS compiler is definitely useful. I came here looking for one so that I could write a Grunt plugin for instance. – JackMahoney Mar 12 '14 at 03:57
  • 1
    -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. – Tom Jun 25 '14 at 13:57
  • If you want to let users play with sass on their browser, try node-sass with browserify. Use at your own risk! – stevemao Nov 25 '14 at 04:08
  • 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 – joeytwiddle Aug 23 '15 at 23:54
  • 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. – Asken Aug 27 '15 at 13:04
  • 1
    This is getting more important now as Bootstrap 4 will switch to SASS. Because many live theme customizer need something to build on like http://demo.virtuosoft.eu/live-less-theme-customizer/doc/index.html https://github.com/pikock/bootstrap-magic and others – Sandro Sep 10 '15 at 12:47
  • 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. – Simon Ferndriger Jul 28 '16 at 12:22
  • 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. – Ferdinand Prantl Aug 25 '16 at 10:13
  • 1
    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 Jul 14 '17 at 15:17
31

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

rodneyrehm
  • 13,442
  • 1
  • 40
  • 56
  • 3
    Now we just need a C++ to Ruby compiler and we can unify the codebase. – joeytwiddle Aug 23 '15 at 23:59
  • 1
    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 – Anirudha May 17 '17 at 11:31
9

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

nikoloza
  • 968
  • 2
  • 12
  • 30
  • 2
    A combination of this and the (currently accepted) answer should be the actual accepted answer. – plaidcorp Jul 14 '17 at 20:03
  • I wanted to write SASS on repl.it, and came up with a solution to compile it in the browser: 1. Add to HTML 2. Find all link[type="text/scss"] elements and fetch their href's over AJAX 3. Use https://github.com/medialize/sass.js to compile SASS -> CSS 4. Replace the link with a containing the compiled CSS. The result: https://minesweeper.duzun.repl.co/ – DUzun Sep 25 '20 at 11:56
6

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/

rodneyrehm
  • 13,442
  • 1
  • 40
  • 56
Chong Lip Phang
  • 8,755
  • 5
  • 65
  • 100
4

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?

tilleryj
  • 14,259
  • 3
  • 23
  • 22
  • 3
    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. – A. Matías Quezada Nov 12 '12 at 15:27
  • 1
    I suggest you look at using Stylus instead of sass on Node projects. – airtonix Aug 04 '13 at 10:29
3

There is an attempt on GitHub, scss-js. However, it is incomplete and hasn't had any commits in five months.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Peter Lyons
  • 142,938
  • 30
  • 279
  • 274
  • 2
    This looks like a node js module? Original question was a bout client side implementation, no? – jayarjo Oct 11 '12 at 08:10
1

Why LibSass

While there is no officially sanctioned JavaScript implementation of sass, there is an official C/C++ port of the Sass engine, known as LibSass. Because LibSass is an official implementation, it's best to opt for a JavaScript library that uses LibSass under the hood.

On the server

For JavaScript running in a Node.js environment, there's Node-sass.

Under the hood, Node-sass uses LibSass itself.

In the browser

For JavaScript running in the browser, there's Sass.js.

Under the hood, Sass.js uses a version of LibSass (v3.3.6 at the point of my writing this) that's been converted to JavaScript with Emscripten.

John Slegers
  • 45,213
  • 22
  • 199
  • 169