入力したSassをリアルタイムでCSSにコンパイルしてくれるWEBサービス「SassMeister」

入力したSassをリアルタイムでCSSにコンパイルしてくれるWEBサービス「SassMeister」

入力したSassをリアルタイムでCSSにコンパイルしてくれるWEBサービス「SassMeister」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    格安で広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

SassMeisterは、入力したSassのコードをリアルタイムでCSSにコンパイルしてくれるツールです。

Sassが使える環境を構築しなくても、手軽にSassを試すことができます。

スポンサードリンク

SassMeisterの使い方

SassMeisterにアクセスして、左側にSASSのコードを入力します。

例えば、下記のような感じです。左側のSassがコンパイルされて右側にCSSとして出力されます。

SassMeisterの画面

Sass

#main {
  width: 600px;
  p {
    margin: 0 0 1em;
    em {
      color: #f00;
    }
  }
}

CSS

#main {
  width: 600px;
}
#main p {
  margin: 0 0 1em;
}
#main p em {
  color: #f00;
}

上記のように、Sassの文法を認識して、CSSにコンパイルしてくれます。ネストはもちろんのこと、変数・親セレクタの参照・演算・@mixinなど、一通りのルールを認識します。

また、上部メニューの「View」では分割を横から縦に切り替えたり、「Options」からはテーマの変更などが行なえます。エディタを好きなようにカスタマイズして使えるのはありがたいですね。

エディタのオプション変更

あとがき

Sassインストールする前に、どんな感じか試すことができますね。これからSassを導入してみようと考えている方は、ぜひお試ししてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。