CSS を Sass/SCSS に変換する
Sass は CSS を変数、ネスト、mixin、関数で拡張します。プレーンな CSS を SCSS に変換して、これらの機能を段階的に使い始めましょう。
- 1
SCSS は CSS の上位集合です。有効な CSS はすべて有効な SCSS です。変換は構文的には自明ですが、価値はリファクタリングにあります。繰り返される値を変数に抽出し、セレクタをネストし、再利用可能なパターンを mixin にします。SCSS は CSS と同様に波括弧とセミコロンを使い、Sass(インデント構文)はインデントのみを使います。
- 2 CSS フォーマッター →
SCSS に変換する前に CSS をフォーマットします。一貫したフォーマットは、リファクタリング対象のパターン(繰り返される色、間隔の値、セレクタのプレフィックス)を特定しやすくします。フォーマットは構文エラーの発見にも役立ちます。
- 3
変換後のリファクタリング手順:(1) 繰り返される値を $変数に抽出($primary-color、$spacing-unit)。(2) 関連するセレクタをネスト(.card { .title { } .body { } })。(3) 繰り返しパターンに @mixin を作成(@mixin flex-center { display: flex; align-items: center; justify-content: center; })。(4) @include で mixin を適用。(5) @import または @use でパーシャルに分割。
よくある質問
- SCSS と Sass の構文の違いは?
- SCSS は CSS と同様に波括弧 {} とセミコロン ; を使い、学びやすく CSS 互換です。Sass はインデントを使い(波括弧もセミコロンもなし)、簡潔ですが CSS とは異なります。CSS 互換性とチームの習熟度を重視するなら SCSS、簡潔さを重視するなら Sass を使ってください。
- CSS カスタムプロパティがある今、Sass はまだ必要ですか?
- CSS カスタムプロパティ(変数)は多くのユースケースをカバーしますが、Sass には CSS にできない mixin、関数、ループ、ビルド時最適化があります。ランタイムのテーマには CSS カスタムプロパティを、ビルド時のロジックとコード整理には Sass を使ってください。
このタスクを解決するワークフロー
関連ツール
CSS フォーマッター
Beautify or minify CSS online. Expand rules with indented properties or compress to a single line。無料、プライベート、100%クライアントサイド。 ツール
CSS グラデーションジェネレーター
Generate CSS gradient code for linear, radial, and conic gradients with custom angles and color stops。無料、プライベート、100%クライアントサイド。 ツール
カラーコンバーター
Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。 ツール