CSS を Sass/Scss に変換してくれるサービス css2sass が超便利
CSS を Sass or Scss に変換してくれるウェブサービス css2sass が便利だったのでご紹介します。
css2sass は CSS を Sass または Scss 形式に変換してくれるウェブサービスです。
変換したい CSS を左側のフォームに入力して、真ん中の矢印ボタンから SASS or SCSS をどちらかクリックすることで、右側のフォームへ簡単に変換することができます。
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;
}
変換元 CSS コードを入力したら、中央にある SASS or SCSS ボタンをクリックします。
今回は 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 の使い方の説明でした。