aircolor memolog

Web制作・テクノロジー、たまに旅行記

Sublime TextでBEM設計(SCSS)する際には Syntax Highlighting for Sass 使ったほうがいいよ

SCSS(Compass)でBEM設計コーディングをしよう、と思った時に気になったことが。 Sublime Textの人気なSCSS用シンタックスパッケージはSCSSですが、ComapssのBEM向け記法で記述しようとすると、

f:id:kgsi:20150701205833p:plain

こんな具合にclassにハイライトが入ります。
具体的には「&」のあとに「_」(アンダースコア)や「-」(ハイフン)をつけると起こる現象です。 別にコーディング自体に影響はないですが、エラーが起きてる気がして心がざわつくので なんとかしたい...と思って調べていたらこんな記事がありました。 海外の方も同じことを思っていたそうです。

BEM nesting SCSS with parent selectors breaks Sublime Text syntax highlighting?

Syntax Highlighting for Sassをインストールする

ということで、下記パッケージをインストールすることで解決できます。

Syntax Highlighting for Sass

f:id:kgsi:20150701205913p:plain

はい、この通り治ります。気持ち悪くなくなりました。
なお、パッケージを切り替えることでコード補完もemmetのような省略コードを打つ形式に切り替わります。 便利なので問題ないのですが、SCSSのパッケージに慣れていた方は一応注意を。