an easy way to compile sass in the browser
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

With sass-link you can use sass and scss alomst like regular css. It parses the <link> and <style> tags of your document, compiles them using sass.js and injects the compiled css back into the document.

You can add <link> tags that refer to .sass or .scss files:

<link rel="stylesheet" type="text/scss" href="main.scss">

You can also use sass and scss inside <style> tags:

<style type="text/scss">
    /* scss */

To get started, add sass.js and sass-link to your document:

<script src=",gh/slymax/sass-link@0.1.3/sass-link.js"></script>

Your styles will only be compiled if the type attribute is set to text/sass or text/scss.

To avoid seeing the unstyled document before your stylesheets have compiled, you can add the sass-cloak attribute to your <body> along with some css to hide it:

    [sass-cloak] {
        display: none;
<body sass-cloak>

Only use sass-link for prototyping. It should not be used in production.