@neos21/in-browser-sass : Compile SASS / SCSS in the browser.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
scripts
src
.gitignore
.npmignore
LICENSE
README.ja.md
README.md
in-browser-sass-standalone.js
in-browser-sass-standalone.min.js
in-browser-sass.js
in-browser-sass.min.js
package.json

README.md

@neos21/in-browser-sass

NPM Version

Compile SASS / SCSS in the browser.

Japanese version is here

Demo

Demo (GitHub Pages)

Installation

<!-- Load sass.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.7/sass.sync.min.js"></script>
<!-- Load this script -->
<script src="in-browser-sass.js"></script>

sass.js CDNs are available here:

Standalone Version

Standalone version includes sass.js. So installation needs one line:

<!-- Load this script included sass.js -->
<script src="in-browser-sass-standalone.js"></script>

Usage

You can use link or style elements for include SASS / SCSS. type="text/sass" or type="text/sass" attribute must be set.

<!-- SASS : link tag -->
<link rel="stylesheet" type="text/sass" href="example.sass">

<!-- SCSS : link tag -->
<link rel="stylesheet" type="text/scss" href="example.scss">

<!-- SASS : style tag -->
<style type="text/sass">
body
  p
    color: #f00
</style>

<!-- SCSS : style tag -->
<style type="text/scss">
body {
  p {
    font-weight: bold;
  }
}
</style>

This compiles to:

<!-- SASS : link tag -->
<link rel="stylesheet" type="text/sass" href="example.sass">
<!-- Compiled example.sass -->
<style type="text/css">
body > selection {
  font-size: 110%;
}
</style>

<!-- SCSS : link tag -->
<link rel="stylesheet" type="text/scss" href="example.scss">
<!-- Compiled example.scss -->
<style type="text/css">
a {
  color: #06f;
}
a:hover {
  color: #f09;
}
</style>

<!-- SASS : style tag -->
<style type="text/sass">
body
  p
    color: #f00
</style>
<!-- Compiled inline SASS -->
<style type="text/css">
body p {
  color: #ff0;
}
</style>

<!-- SCSS : style tag -->
<style type="text/scss">
body {
  p {
    font-weight: bold;
  }
}
</style>
<!-- Compiled inline SCSS -->
<style type="text/css">
body p {
  font-weight: bold;
}
</style>

Compiled style elements are inserted after each original element.

Author

Neo (@Neos21)

Links