Important edit
This another question (pointed as a dupplicate reference) have different requisites and use case. It is true, because to this question is crucial, not just for development or testing, compile the scss file on the client. Is is needed because several client attributes will be changed and calculed at the page render.
If we using Less, we could use it on the fly, without any server, just using a pure web page with html, javascript and less files. For example:
index.html
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="index.less" />
<script type="text/javascript" src="less.min.js"></script>
</head>
<body>
<div id="target"></div>
</body>
</htm>
index.less
@color: blue;
#target {
width: 500px;
height: 500px;
background-color: @color;
}
less.min.js
But, how can we do this with Sass?
A prerequisite is the application should not use python, ruby, php or any other server side program. The scss Sass file should be interpreted on the client side only, creating a unique css file that achieves the client attributes.
The motivation is that Sass is better when using if, else, for, while loops. And the client side only compilation is to use it with Apache Cordova.
I have found this sass.js repository, and it is in the right way. But I couldn't find a easy way to use it like Less does, including just some thing like:
<head>
<link rel="stylesheet/sass" type="text/css" href="index.scss" />
<script type="text/javascript" src="sass.js"></script>
</head>
How can we do this?
