Sublime Text 3でCompassのビルド設定とエラー

新しいPC(Windows10)に入れていたSublime Text3でCompassのビルド設定をしていなかったのでしばらくぶりに設定をした時の覚書とエラーが出たのでその対処方法。

Ruby がインストールされていて、既にSassとCompassはインストール済みの上の作業です。

一応Rubyの確認

ruby -v

インストールされていれば、バージョンが表示される

ruby 2.3.1p112 (2016-04-26 revision 54768) [x64-mingw32]

 

gemをアップデートする

gem update --system

sassをアップデートする

gem update sass
Updating installed gems
Updating sass
Fetching: sass-listen-4.0.0.gem (100%)
Successfully installed sass-listen-4.0.0
Fetching: sass-3.5.1.gem (100%)
Successfully installed sass-3.5.1
Parsing documentation for sass-listen-4.0.0
Installing ri documentation for sass-listen-4.0.0
Installing darkfish documentation for sass-listen-4.0.0
Parsing documentation for sass-3.5.1
Installing ri documentation for sass-3.5.1
Installing darkfish documentation for sass-3.5.1
Done installing documentation for sass-listen, sass after 10 seconds
Parsing documentation for sass-3.5.1
Parsing documentation for sass-listen-4.0.0
Done installing documentation for sass, sass-listen after 3 seconds
Gems updated: sass sass-listen

compassをアップデートする

gem update compass
Updating installed gems
Nothing to update

compassはアップデータありませんでした。

この後、Sublime text 3での設定。

sublime text3で必要なパッケージのインストール

sublime text 3を起動後、ctrl + shift + p でPackage Controlを起動し、Package Control: Install Packageを選択。

いろいろ便利なパッケージがありますが、今回は以下のものをインストール

・Sass
・SASS Build
・SCSS
・Compass
・SublimeOnSaveBuild

これで、config.rbのあるフォルダのscssファイルを開き、保存してみる→保存と同時にビルドされるはず・・・

と、以下のようなメッセージが。

DEPRECATION WARNING on line 87 of C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote('"$moz-"#{$experimental-support-for-mozilla} "$webkit-"#{$experimental-support-for-webkit} "$opera-"#{$experimental-support-for-opera} "$microsoft-"#{$experimental-support-for-microsoft} "$khtml-"#{$experimental-support-for-khtml}')

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 92 of C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote('"$ie6-"#{$legacy-support-for-ie6} "$ie7-"#{$legacy-support-for-ie7} "$ie8-"#{$legacy-support-for-ie8}')

You can use the sass-convert command to automatically fix most cases.

    write D:/Sites/***/css/styles.css
[Finished in 4.2s]

warningなので、致命的じゃないですが、気になるので調べてみる。
すると、こちらのページが参考になりました

【メモ】SassバージョンアップしたらCompassでwarningが出る
http://qiita.com/ryokio0129/items/bb62e4aeab2921290846

Compass & Sass Deprecation warning
https://stackoverflow.com/questions/35949660/compass-sass-deprecation-warning

メッセージにある、
C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss
を開いてみます。

85行目あたり

A debug tool for checking browser support
@mixin debug-support-matrix($experimental: true, $ie: true) {
  @debug  #{'$moz-'}$experimental-support-for-mozilla
          #{'$webkit-'}$experimental-support-for-webkit
          #{'$opera-'}$experimental-support-for-opera
          #{'$microsoft-'}$experimental-support-for-microsoft
          #{'$khtml-'}$experimental-support-for-khtml;
  @debug  #{'$ie6-'}$legacy-support-for-ie6
          #{'$ie7-'}$legacy-support-for-ie7
          #{'$ie8-'}$legacy-support-for-ie8;
}

この部分を以下のように修正します。

@mixin debug-support-matrix($experimental: true, $ie: true) {
  @debug  '#{"$moz-"}$experimental-support-for-mozilla'
          '#{"$webkit-"}$experimental-support-for-webkit'
          '#{"$opera-"}$experimental-support-for-opera'
          '#{"$microsoft-"}$experimental-support-for-microsoft'
          '#{"$khtml-"}$experimental-support-for-khtml';
  @debug  '#{"$ie6-"}$legacy-support-for-ie6'
          '#{"$ie7-"}$legacy-support-for-ie7'
          '#{"$ie8-"}$legacy-support-for-ie8';
}

そして保存。

無事エラーは出なくなり、Compassのビルドもできるようになりました。