neos21/in-browser-sass

@neos21/in-browser-sass : Compile SASS / SCSS in the browser.

in-browser-sass : @neos21/in-browser-sass

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.11.1/sass.sync.min.js"></script>
<!-- Load this script -->
<script src="in-browser-sass.js"></script>

sass.js CDNs are available here:

• https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.1/sass.sync.min.js
• https://unpkg.com/[email protected]/dist/sass.sync.js

Bundle Version

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

<!-- Load this script included sass.js -->
<script src="in-browser-sass.bundle.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.

@import is not supported.

Links

• Neo's World
• GitHub - Neos21
• GitHub - in-browser-sass
• GitHub Pages - @neos21/in-browser-sass
• npm - @neos21/in-browser-sass

in-browser-sass's Issues

Does this handle imports?

I have a scss file that looks similar to this

@import './base';

.foo {
    color: bar;
}

I am getting undefined in my style tag.

MIMETYPE!?

I get this error, whatever I set in "type" (type="text/sass", type="text/scss" or type="text/css"):

The stylesheet http://grid2fullscreen.local/css/style.scss was not loaded because its MIME type, “text/plain”, is not “text/css”.

OK, this is a complete mess trying to get to work!

Could you provide a simple working example for download, as I can't seem to get ANYTHING of this to work?

Sass import not working

Really like this js library, but I have a big SCSS file that I would like to extract into multiple files. I tried to use the import and it seems to error out. Any way around this?

Syntax errors?

I get this as well:

SyntaxError: expected expression, got '&'

from the "in-browser-sass-standalone.min.js" file ...