Sublime Text 3：Compassの導入とDEPRECATION WARNINGの解消

WEB Tips デザイン・コーディング

この記事にはプロモーションが含まれています

目次

Sublime Text3でCompassを使えるようにビルド設定をした時の覚書とDEPRECATION WARNINGが出たのでその対処方法をまとめています。

環境はWindows10、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で必要なパッケージのインストール（Package Control）

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

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

  • Sass
  • SASS Build
  • SCSS
  • Compass
  • SublimeOnSaveBuild

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

DEPRECATION WARNINGが気持ち悪いので解決する

以下のような警告メッセージが表示されました。

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]

超意訳ですが、「#{} にはquotes（''）を使ってよ」と言われているようです。

warningなので致命的なエラーじゃないですが気持ち悪いので解決します。

メッセージの1行目にある以下のファイルを開いてみます。

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;
}

この部分を以下のようにquotes（''）で囲んで修正します。

@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のビルドもできるようになりました。

参考:【メモ】SassバージョンアップしたらCompassでwarningが出る
参考: Compass & Sass Deprecation warning Stack Overflow