CSS を Sass/Scss に変換してくれるサービス css2sass が超便利
CSS を Sass or Scss に変換してくれるウェブサービス css2sass が便利だったのでご紹介します。
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 の使い方の説明でした。
