PIYO - Tech & Life -

scssじゃなくてsassのほうの文法を調べたいときに使っている方法

CSS Sass

SassはCSSの拡張言語です。

Sassにはscss形式とsass形式があって(形式って言うのかどうかわからないけど呼んじゃう)、scss形式で紹介されていることのほうが多いように思います。ですが、個人的にはsass形式のほうが記述量が少なくて好きです。

Sassのガイドページにはscssとsassとでそれぞれサンプルコードが用意されているので対比することが可能です。

Sass: Sass Basics
Syntactically Awesome Style Sheets

ところが、実践的な情報は使っている人が多い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から導出できると大変便利です。