Sublime Text 3でSCSSファイルにシンタックスハイライトを適用させる

やり方が幾つかあって。

CSSファイルと認識させる

普通に開くとPlain Text扱いされるので、CSSに変更する。

ファイルのシンタックスをCSSにする

メニューの、表示 > シンタックス > CSS

拡張子判定で必ずCSSのシンタックスが適用されるようにする

メニューの、基本設定 > 基本設定 - 拡張 > シンタックス指定 - ユーザー

CSS.sublime-settingsというファイルが開かれるので、

{ "extensions": ["scss"] }

と記述する。

面倒くさがって今までこれでやってたけど、当然ながらCSSの色しか付かない。

プラグインを入れる

プラグインが幾つかあるようで混乱した。

SASS

Sass - Packages - Package Control

@importの色がつかない。

SCSS

SCSS - Packages - Package Control

@mediaに色がつかない。

Syntax Highlighting for Sass

Syntax Highlighting for Sass - Packages - Package Control

@importも@mediaも色がついた。

結局

機能的な違いはよくわからないけど、とりあえず漏れなく色がついている（ような気がする）Syntax Highlighting for Sassを使うことにしました。