ITコンサルの日常

ITコンサル会社に勤務する普通のITエンジニアの日常です。

Syntax (構文) - .sassと.scssの違いについて

補足

つまり、これからSassを使い始めるなら、SCSSの構文(ファイル名 *.scss)で書いた方が良いってことです。

超意訳

Sassには二つの構文があります。一つ目は、SCSS(Sassy CSS)として知られ、このドキュメントを通じて使われている、CSS3の構文を拡張したものです。全ての有効なCSS3スタイルシートは、SCSSファイルとしても有効です。加えて、SCSSは多くのCSSハックと、IEの古いフィルタ構文などのブラウザ固有の構文が使えます。この構文は、以下で説明するSassの機能で拡張されています。SCSSの構文で書かれたファイルは、.scssの拡張子を持ちます。


二つ目は古い構文で、インデント構文(単に“Sass”とも言われます)として知られているもので、CSSを書くのに、より簡潔な方法を提供します。この構文では、セレクタのネストを表すのに、カッコよりもインデントを、プロパティを区切るのに、セミコロンよりも改行を使います。一部の人は、SCSSよりも、この構文が読みやすく、また、速く書けることに気づきました。インデント構文は、SCSSと同じ機能を持っていましたが、やや構文が異なっていました。この違いは、インデント構文のリファレンスで説明しています。インデント構文で書かれたファイルは、.sassの拡張子を持ちます。


どちらの構文で書かれた場合でも、お互いにインポートすることが可能です。ファイルは、sass-convertコマンドラインツールを使って、自動的にお互いに変換することが可能です。

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

(注)拡張子で判定しているらしい。コマンドラインオプションでフォーマットを明示することも可能。