SassはCSSの拡張言語です。
Sassにはscss
形式とsass
形式があって(形式って言うのかどうかわからないけど呼んじゃう)、scss
形式で紹介されていることのほうが多いように思います。ですが、個人的にはsass
形式のほうが記述量が少なくて好きです。
Sassのガイドページにはscssとsassとでそれぞれサンプルコードが用意されているので対比することが可能です。
ところが、実践的な情報は使っている人が多いscss形式で見つかることが多く、そんなときにsassでどうやって書いたらいいのかわからないという状況になりがちです。公式ドキュメントを読んでもベーシックな箇所以外はscssでのみサンプルが書かれています。
そこでよくやるのは、scssとsassを変換できるツールまたはサイトを使って、scssで見つけた情報をsassに変換してしまうというやり方です。
Webが手軽なので僕はこの辺を使っています↓↓
https://scss2sass.herokuapp.com/
たとえば公式ガイドのMixinのサンプルを↑のサイトに入力してconvertしてみると
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
↓↓ きちんと変換され、公式ガイドのsassバージョンとほぼ同じに変換されます。
=transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
@mixin
が=
に変わるのとか大体忘れてしまうので、scssから導出できると大変便利です。