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 */
</style>To get started, add sass.js and sass-link to your document:
<script src="https://cdn.jsdelivr.net/combine/npm/sass.js@0.10.10/dist/sass.sync.js,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:
<style>
[sass-cloak] {
display: none;
}
</style><body sass-cloak>
...
</body>Only use sass-link for prototyping. It should not be used in production.