Windows10機へのCompassの導入とDEPRECATION WARNING問題

3D用にと誂えたWindows10機も仕事用に漸く侵食されつつあり 此れでMicrosoft社のオフィスでも導入しよう日が来ようものならば世の儚さを思わされ なかなか悲しいものがありますが此れもまた世の習いなれば致し方なし、 さてこそホームページの作成、編集に最早 Compass は欠かせないツールとなっておりますれば オフィスの導入に先立っての導入となりましたが CompassのインストールとCSS変換時に文字が消える問題の解決 の如く多少トラブルのも毎度のこと、 観念して対応作業を実践した顛末が本記事と相なります。

CSSフレームワーク Compass には其のインストールに先立って拠って立つ処の Sass 、そして Sass を導入するための RubyGem 、 そして又 RubyGem を動かすための言語 Ruby の導入が必須となりますが Compass 利用者には既知のこととて改めて述べる迄もないでしょうが老婆心ながら下に軽く手順を記し置きます。

スポンサーリンク

Rubyのインストール

ダウンロードサイトダウンロードページ より64bit版インストーラー rubyinstaller-2.2.5-x64.exe (17,943kB)をダウンロードしてダブルクリックすればインストールは完了します。 VER.2.3.1が既に公開されているにも関わらず VER.2.2.5を選択したのは WHICH VERSION TO DOWNLOAD? に以下の如くあったればこそ

If you don’t know what version to install and you’re getting started with Ruby, we recommend you use Ruby 2.2.X installers. These provide a stable language and a extensive list of packages (gems) that are compatible and updated.

面倒臭い作業は極力避けたいティミッドな身の選択はステーブルなバージョンです。 インストール途中の選択肢では日本語を、 そしてチェックボックスリストが3つ用意される箇所にては Rubyの実行ファイルへ環境変数PATHを設定する にチェックを入れ後々の手間を省きます。 インストールが完了したらコマンドプロンプトでバージョンを確認すれば 確りインストールのなったか如何か確認できるのもいつものことです。

$ ruby -v
ruby 2.2.5p319 (2016-04-26 revision 54774) [x64-mingw32]

RubyGemのアップデート

Ruby の導入がなれば RubyGem も使えるようになっていますが最新のものにアップデートした方が問題を招く可能性が低まります。

$ gem update --system
...(ry
RubyGems system software updated

今回は Windows Ruby Gemのインストール時SSLサーバーの接続拒否問題を回避する ような問題もなくサクッとアップデートがなりました。 最後にバージョンを確認します。

$ gem -v

Sassのインストール

RubyGemが導入されたので利用してSassのインストールです。 最後に此方もバージョンと共にインストールの是非を確認します。

$ gem install sass
Fetching: sass-3.4.22.gem (100%)
Successfully installed sass-3.4.22
Parsing documentation for sass-3.4.22
Installing ri documentation for sass-3.4.22
Done installing documentation for sass after 8 seconds
1 gem installed

$ sass -v
Sass 3.4.22 (Selective Steve)

Compassのインストール

漸く本命 Compass のインストールですが Sass と同様であるのは言う迄もないでしょう。

$ gem install compass
...(ry
8 gems installed

$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2016 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

テストフォルダを生成して実際に create コマンドで機能させてみますが取り敢えずは機能するようです。

~test$ compass create

Compass実稼働に於ける問題発生

どうやら作業環境は整ったようであるので実務に入ろうと Compass を起動します。 すると警告が発生されました。

~test$ compass w

DEPRECATION WARNING on line 87 of /usr/local/lib/ruby/gems/2.2.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:

非推奨を示す DEPRECATION WARNING は此の進展著しいご時世の開発者に取れば屡々目にする警告でもあるでしょう。 言語のロードマップに従い削除される予定のメソッドなどを使用していると吐き出される警告で馴染みのあるものです。 警告に過ぎないので放置しておく手もあるのですが Compass 利用時に毎度受けるのではどうにも気持ちが悪くもありますし コマンドプロンプト画面が五月蝿くなって確認効率の落ちる実務上の問題も含有します。 出来得れば排除したくもありたい DEPRECATION WARNING です。

Compass実稼働に於ける問題への対応

其処でネットを繰ってみるとこの手の問題ではなかなか日本語の情報に出会えないのも毎度のことです。 漸く GitHub の Compass の Issuesよすが を見つけ出したのが以下リンクになります。

Deprecation warning, interpolation near operators · Issue #2052 · Compass/compass

まとめてみればどうやら _deprecated-support.scss を記述した開発者が非推奨にならんとするシンタックスで書いたので 其れがため毎回ワーニングが吐き出されるらしく CodeKitマターで根本的に解決する方法もあるけど取り敢えず五月蝿さを 解消出来る方法を教えてくれるのはエラーを吐く該当行を編集すれば宜しい、なる情報です。 2016年1月27日に質問者から提出されたIssueに対する mrpatricko の2016年3月24日の回答で 元コードと編集コードを以下に示しましょう。

元コード
// 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;
}
編集コード
// 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';
}

此の編集を _deprecated-support.scss に施すことで先ずは煩雑な警告 DEPRECATION WARNING 出力からは免れ得るでしょう。

スポンサーリンク