Help us understand the problem. What is going on with this article?

sassをブラウザでコンパイルして確認できるサイトを作成しました。

More than 5 years have passed since last update.

Sass Preview

Sass Preview.png

使い方

左側のSassのtextareaにsassのコードを入力して、Compileボタンを押すか、
またはie以外のブラウザでは、cmd+s or ctrl+sを押すとコンパイル結果が右側に表示されます。

sassの文法を軽く確認したいときに使うといいと思います。

指定できるoption

  • syntax

    • scss
    • sass
  • style

    • nested
    • expanded
    • compact
    • compressed
  • line_numbers

技術解説

sassはrubyのコードでSass::Engine.newを用いてsassをコンパイルができるので、
サーバーはajaxでscss文字列を受け取り、コンパイル結果をブラウザに返しています。

using_sassこの辺りに書いてあります。

engine = Sass::Engine.new(content,  #contentはscss文字列。
  :syntax => :nested, 
  :style => :scss, 
  :line_numbers => false
)
engine.render #返り値はcss文字列。
prinum
uniba
ユニバ株式会社は、"さわれるインターネット(Embodied Virtuality)"の会社です。
http://uniba.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away