SassをCSSにコンパイル（変換）するなら「SassMeister」がおすすめ

一瞬で簡単にSassのコードをCSSに変換できるWebアプリ「SassMeister」を紹介します。

色々なアプリを試しましたが、手軽にさくっとコンパイルしたいのであればSassMeisterが最もおすすめです。

ブラウザとネット環境さえあればすぐに使えますし、リアルタイムに変換してくれるのでちょっとした確認や編集に便利です。

しかも全ての機能を無料で使うことができます。

使い方

まずは下記URLにアクセスします。
» SassMeister（https://www.sassmeister.com/）

以下のようなサイトが表示されるので、左側のエディタに変換したいScssのコードを貼り付けるだけです。

貼り付けると数秒後に変換されたCSSのコードが右側のエディタに自動で表示されます。

もちろんコピペではなくイチから自分で書いてもOKです。左側のエディタで編集した内容がリアルタイムでCSSに変換されていきます。

簡単なシンタックスエラーもチェックしてくれます。

その他の機能

HTMLやMarkdownを記述してCSSの表示を確認

上部に並んでいるメニューのViewの中にあるHTMLをクリックするとHTML用のエディタが表示されます。

そのエディタに適当なHTMLを入力すればCSS（SCSS）がどのように反映されるか確認することができます。

HTMLではなくMarkdownを使うこともできます。

方法は上部メニューのOptionからMarkup Syntaxと進みMarkdown選ぶだけです。

HTMLと表示されていたエディタがMarkdownに変わるので、そこにMarkdownを書けばOKです。

Markdownに対してCSSが適用されたものが確認できるようになります。

コンパイラの変更

SassMeisterではSassのコンパイラを選ぶことができます。選択肢は下記の5つ。

• dart-sass v1.32.12
• dart-sass v1.26.11
• dart-sass v1.26.10
• libsass v3.5.5
• Ruby Sass v3.7.4

CSSのアウトプット方法の変更

以下の2種類からCSSのアウトプット方法を選べます。

• expanded
• compressed

デフォルトではexpandedになっていて、一般的なコーディングスタイルのCSSに変換されます。

compressedを選ぶと以下のように改行やスペースが詰まった状態のCSSに変換されます。

エディタの機能（テーマの変更とVimキーバインド）

エディタとしての機能もこだわって作られているので、多少の編集であればこのサイト上でできてしまいます。

まず、**テーマ（カラースキーム）**を設定する機能があります。選べるのは下記の9種類。

• Dawn
• Github
• Kuroir
• Solarized Light
• Tomorrow
• Merbivore Soft
• Monokai
• Solarized Dark
• Tomorrow Night Eighties

かなりマニアックな機能ですが、編集時のキー操作をVimライクに変更することもできます。

コードをGistに保存

Githubアカウントへのログインが必要ですが、作成されたコードをGithubのGistに保存することが可能です。

まとめ

SassのコードをCSSに変換できるおすすめのWebアプリ「SassMeister」を紹介しました。

無料で簡単に使える変換アプリの中では一番使いやすく、おすすめなのでぜひ一度試してみてください。