SassをCSSにリアルタイムにコンパイルしてくれるオンラインツール「SassMeister」

CSSを拡張したメタ言語「Sass」。CSSと互換性があり、CSSにはないネスト(入れ子)や変数・エクステンド・ミックスインといった機能を使うことができます。
ただ、Sassのインストールなどに黒い画面(ターミナルやコマンドプロンプト)を少し使うのでハードルが高いと感じてしまいますよね。
Sassのインストールをしなくても簡単にSassを試すことができる「SassMeister」を紹介します。

sponsored link

Sassを試せるオンラインエディタ

SassMeisterは下記のリンクからアクセスできます。

SassMeister | The Sass Playground!

メニューからCSSの表示とHTMLとプレビューの表示を選択できます。(下の画像はSCSS・CSS・HTMLとプレビューを表示)

オプションでは以下のような変更ができます。

  • Compiler( 3.4.4, 3.3.14, 3.2.19, LibSass 2.0.0 )
  • Syntax( SCSS, Sass )
  • Extensions( Bootstrap 3.2.0.2, Compass 1.0.1, Foundation 5.4.6 など )
  • CSS( expanded, nested, compact, compressed )
  • HTML( HTML, Haml, Markdown, Textile, Jade )
  • Theme( Tomorrow, Dawn, GitHub, Kuroir )
  • Enable Emmet support
  • Use Vim keybindings
  • Scroll Past End

特にコンパイルする時のStyleオプション(CSSの項目)がリアルタイムに比較できるのは便利だなと思います。一般的なCSSの記述スタイルのexpandedとインデントと改行をすべて削除したcompressedなんかをみておくといいですね。


ちなみに今回書いているSassコードは、$mainlink-color: blue;などとグローバル変数を始めに記述して、a要素とマウスオーバーとフォーカスした時にそれぞれ呼び出しています。&:hoverとしているのは&(アンパサンド)を使って親セレクタを指定しています。ネストしただけではa :hoverのように半角スペースができてしまうので、疑似クラスを使用する時には必要になります。

まだ勉強中なので詳しいところまでは分かっていませんが、ネストなどで記述が楽になって、変数やエクステンドなどでCSSの管理がしやすくなる印象ですね。