新しいPC（Windows10）に入れていたSublime Text3でCompassのビルド設定をしていなかったのでしばらくぶりに設定をした時の覚書とエラーが出たのでその対処方法。
Ruby がインストールされていて、既にSassとCompassはインストール済みの上の作業です。
一応Rubyの確認
|
1 |
ruby -v |
インストールされていれば、バージョンが表示される
|
1 |
ruby 2.3.1p112 (2016-04-26 revision 54768) [x64-mingw32] |
gemをアップデートする
|
1 |
gem update --system |
sassをアップデートする
|
1 |
gem update sass |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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をアップデートする
|
1 |
gem update compass |
|
1 2 |
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ファイルを開き、保存してみる→保存と同時にビルドされるはず・・・
と、以下のようなメッセージが。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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行目あたり
|
1 2 3 4 5 6 7 8 9 10 11 |
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; } |
この部分を以下のように修正します。
|
1 2 3 4 5 6 7 8 9 10 |
@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のビルドもできるようになりました。