Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @neos21/in-browser-sass with all npm packages installed. Try it out:

var inBrowserSass = require("@neos21/in-browser-sass")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@neos21/in-browser-sass v1.0.8

Compile SASS / SCSS in the browser.

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

NPM Version

ブラウザ上で SASS / SCSS コードをコンパイルし Web ページに適用するライブラリ。

English version is here

デモ

デモ (GitHub Pages)

インストール方法

<!-- 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 の CDN は以下が利用可能。

スタンドアロン版

スタンドアロン版は sass.js を内蔵している。そのため、インストールは以下の1行で済む。

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

使い方

HTML 中に link 要素もしくは style 要素で SASS / SCSS コードを挿入する。type="text/sass"type="text/sass" の属性を付与すること。

<!-- 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>

これが以下のようにコンパイル・適用される。

<!-- 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>

コンパイル後の CSS ソースを持つ style 要素は、元の要素の直後に挿入される。

作者

Neo (@Neos21)

Links

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free