本文へスキップ
Numio

SCSSを標準CSSに変換 — Numio

SCSS（.scss、波括弧構文）を Dart Sass でプレーンな CSS にコンパイルし、Autoprefixer でベンダープレフィックスを付けます。変数、@mixin/@include、ネスト、sass:math などの組み込みモジュールはフラットな CSS ルールに展開されます。

.scss スニペット（例: Bootstrap 風のコンポーネント）からコンパイル済み CSS を得て、Sass のビルド手順がないプロジェクトに貼り付ける。

Scss

CSS

こんなときに使えます

  • .scss スニペット（例: Bootstrap 風のコンポーネント）からコンパイル済み CSS を得て、Sass のビルド手順がないプロジェクトに貼り付ける。
  • SCSS の変更をコミットする前に、ネスト、& セレクター、darken() などのカラー関数がどう展開されるかをデバッグする。

使い方

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

SCSS 入力

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

仕様と制限

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

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

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

FAQ

@use "sass:math" などの組み込みモジュールに対応していますか？

対応しています。コードは Dart Sass でコンパイルされるため、sass:math、sass:color、sass:map などの組み込みモジュールを使えます。送信されるのは貼り付けたテキストだけなので、失敗するのは自分のファイルのインポートのみです。

SCSS はサーバーに送信されますか？

はい。ページはコンパイルのためにコードを自身の /api/sass-to-css エンドポイントに POST します。プレフィックス付与と整形はその後ブラウザー内で行われます。共有が許可されていないコードは貼り付けないでください。

.sass のインデント構文にも使えますか？

いいえ。このページは SCSS 構文でコンパイルするため、インデントベースのコードはパースに失敗します。同じ API にインデント構文フラグを送る Sass to CSS ページを使ってください。

古いブラウザー向けのベンダープレフィックスを付けるには？

「設定」を開き、"last 2 versions" や "not ie < 11" などのターゲットをオンにします。選択したクエリは Autoprefixer のブラウザーリストとして渡されます。

仕様を確認する