CSS to SCSS変換ツール
BEM記法特化型

BEM記法で書かれたCSSを、適切にネストされたSCSS形式に自動変換。
.Block__element → &__element、.Block--modifier → &--modifier
メディアクエリのネスト、擬似クラスの変換にも対応。フロントエンド開発を効率化する完全無料ツール。

🎯BEM記法特化 ✓__element変換 ✓--modifier変換 ✓メディアクエリネスト ✓完全無料

コード変換エリア

📝 CSS Input

✨ SCSS Output

CSS to SCSS変換ツールについて

🎯 BEM記法に特化した変換ツール

このツールは、BEM（Block Element Modifier）記法で書かれたCSSを、SCSSの強力なネスト機能を活用した形式に自動変換することに特化しています。手作業では時間のかかるBEM記法のネスト化を一瞬で完了し、コードの保守性を大幅に向上させます。

BEM記法の自動変換機能

  • Element（要素）の変換: .Block__element を &__element に自動変換
  • Modifier（修飾子）の変換: .Block--modifier を &--modifier に自動変換
  • 深いネスト対応: .Block__element__sub のような深い階層も正確に変換
  • 複合パターン: .Block__element--modifier のような組み合わせも対応

その他の主要機能

  • メディアクエリのネスト: 各要素内にメディアクエリを適切に配置
  • 擬似クラス・擬似要素の変換: :hover、::before などを &:hover、&::before に変換
  • 階層構造の保持: CSS のセレクタ関係を正確に SCSS の階層構造に変換
  • @keyframes や @charset の保持: 特殊なアットルールもそのまま出力

使い方

  1. 左側の「CSS Input」エリアにBEM記法で書かれたCSSコードを貼り付け
  2. 「変換」ボタンをクリック（または Ctrl+Enter / Cmd+Enter）
  3. 右側の「SCSS Output」エリアに変換結果が表示されます
  4. 「コピー」ボタンでクリップボードにコピー

BEM記法の変換例

変換前のCSS:

  • .Card { padding: 20px; }
  • .Card__header { font-size: 24px; }
  • .Card__header--large { font-size: 32px; }
  • .Card__body { margin: 15px 0; }
  • .Card__footer { text-align: right; }
  • .Card--featured { border: 2px solid gold; }

変換後のSCSS:

  • .Card {
  •   padding: 20px;
  •   &__header {
  •     font-size: 24px;
  •     &--large {
  •       font-size: 32px;
  •     }
  •   }
  •   &__body {
  •     margin: 15px 0;
  •   }
  •   &__footer {
  •     text-align: right;
  •   }
  •   &--featured {
  •     border: 2px solid gold;
  •   }
  • }

BEM記法とSCSSを組み合わせるメリット

  • コードの可読性向上: Blockの配下にElementとModifierが視覚的に整理される
  • 保守性の大幅改善: 関連するスタイルが1つのブロックにまとまり、修正が容易に
  • セレクタの重複削減: Block名を何度も書く必要がなくなり、コード量が削減
  • リファクタリングが容易: Block名の変更時も一箇所の修正で済む
  • チーム開発に最適: 一貫性のあるコード構造で、複数人での開発がスムーズに

SCSSのその他のメリット

  • 変数の活用: 色やサイズなどを変数で管理し、一括変更が可能
  • ミックスインの活用: 共通のスタイルパターンを再利用可能
  • 継承機能: @extendを使った効率的なスタイル継承
  • 計算機能: サイズや色の計算をCSS内で実行可能