Newton's Programmatic Measurements

npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

@neos21/in-browser-sass

1.0.7 • Public • Published

@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

Keywords

none

install

npm i @neos21/in-browser-sass

Downloadsweekly downloads

24

version

1.0.7

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability