Sassを標準CSSに変換 — Numio

こんなときに使えます

• 古い Rails や Bulma 系プロジェクトのインデント構文 .sass ファイルが何にコンパイルされるかを、Sass のツールチェーンを用意せずに確認する。
• Sass を受け付けない CMS、メールテンプレート、codepen に貼るために、.sass スニペットからプレーンな CSS を作る。

使い方

1. Sass エディターに Sass を貼り付けるか、.sass ファイルをドロップします。
2. 「設定」を開き、Autoprefixer のターゲットを選びます: defaults、not ie < 11、last 2 versions、iOS 7、last 3 iOS versions。初期状態では "defaults" のみオンです。
3. CSS パネルの結果をコピーします。プレーンな CSS なので、そのまま .css ファイルとして保存できます。

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #0b63f3;
}

仕様と制限

コンパイルはサーバーで行われます。ページはコードを /api/sass-to-css に POST し、そこでインデント構文を指定して Dart Sass の compileString が呼ばれます。その後の Autoprefixer と Prettier による整形はブラウザー内の Web Worker で実行されます。

入力は毎回、単独の 1 ファイルとしてコンパイルされます。自分の partial を @use や @import すると "Can't find stylesheet to import" で失敗します。@use "sass:math" などの組み込みモジュールは使えます。

ベンダープレフィックスは選択したターゲットによって決まります。例では "defaults" クエリのもとで user-select に -webkit- と -moz- のプレフィックスが付きます。

入力から CSS が生成されない場合（変数、mixin、関数だけの場合）、エラーではなく、CSS が生成されなかったことを示す CSS コメントが 1 つ出力されます。

FAQ

関連ツール

仕様を確認する

• Sass documentation: Syntax
• Autoprefixer on GitHub