CSS を Sass or Scss に変換してくれるウェブサービス css2sass が便利だったのでご紹介します。

• css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

css2sass とは？

css2sass は CSS を Sass または Scss 形式に変換してくれるウェブサービスです。

変換したい CSS を左側のフォームに入力して、真ん中の矢印ボタンから SASS or SCSS をどちらかクリックすることで、右側のフォームへ簡単に変換することができます。

css2sass の使い方

変換元 CSS をフォームへ入力

Sass 公式サイト にある以下の Nesting サンプルコードを利用して css2sass を試してみました。

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

変換したい形式 Sass or Scss を選択

変換元 CSS コードを入力したら、中央にある SASS or SCSS ボタンをクリックします。

今回は SCSS ボタンをクリックします。

変換結果 Sass or Scss を確認

ボタンをクリックすると右側のフォームに変換後の Scss 形式のコードが出力されます。

変換後の scss コードはちゃんと nav 部分のネストが考慮されたコードになっていることが分かります。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

もし CSS -> Sass (Scss) の変換結果をざっくり確認したい場合は SassMeister のような逆変換サービスを利用して、確認できます。

以上、css2sass の使い方の説明でした。