CSS → SCSS 変換ツール

1行に1ルールずつ書きます。

• * は任意の名前に一致します。& の位置から次のネスト階層になります。
• 初期ルールでは、次のように変換します。
  • .c-card__img--cap → .c-card { &__img { &--cap { … } } }
  • .c-card--big → .c-card { &--big { … } }
  • .c-card.is-disabled → .c-card { &.is-disabled { … } }
• 複数のルールに合うときは、いちばん細かく分けられるルールを使います。
• ::before や :hover などの疑似要素・疑似クラスは、ルールに書かなくても &::before のように自動でネストします。
• 空欄にすると、標準のBEM判定で変換します。
• どのルールにも合わないセレクタは、変換せずにそのまま出力します。