Is there a SASS.js? Something like LESS.js?
CssSassLessCss Problem Overview
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: { ... }}
Css Solutions
Solution 1 - Css
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 - Css
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 - Css
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 - Css
I just discovered an interesting Sass.js Playground. A few things may have changed over the years. Check this out:
Solution 5 - Css
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?
Solution 6 - Css
There is an attempt on GitHub, scss-js. However, it is incomplete and hasn't had any commits in five months.
Solution 7 - Css
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.