トラブルは繰り返されるものとて 己れの遭遇した不都合のブログへの配信は己が身にも都合良く機能し 延いては少しは他者のお役にも立とうかと言うものにて 以前は2016年8月5日に本ブログに投稿した記事 Windows10機へのCompassの導入とDEPRECATION WARNING問題 再び と言う訳で情けは人の為ならずと言った趣がある本記事は 今や手元の環境に必須となりし Sass 及び Compass を先日入手した新機 MacBook Pro にも導入しようとした際の顛末です。
スターバックス珈琲店で開いたMacBook Pro 2016
尚Rubyで書かれた Sass、Compassを導入するには事前に Rubyの走る環境を整えねばならない のは言う迄もありません。事前の環境が整った後ターミナルを起動し 先ずはRubyGemでインストールされているプログラムリストを確認します。
スポンサーリンク
Last login: Thu Mar 9 18:06:57 on ttys000
$ gem list
*** LOCAL GEMS ***
bigdecimal (default: 1.3.0)
…(ry
openssl (default: 2.0.2)
…(ry
rake (12.0.0)
rdoc (default: 5.0.0)
test-unit (3.2.3)
xmlrpc (0.2.1)
$ gem specification openssl
--- !ruby/object:Gem::Specification
name: openssl
version: !ruby/object:Gem::Version
version: 2.0.2
platform: ruby
authors:
- Martin Bosslet
…
test_files: []
$ gem w
$ gem which openssl
/Users/username/.rbenv/versions/2.4.0/lib/ruby/2.4.0/openssl.rb
$ gem list
*** LOCAL GEMS ***
bigdecimal (default: 1.3.0)
…(ry
openssl (default: 2.0.2)
…(ry
rake (12.0.0)
rdoc (default: 5.0.0)
test-unit (3.2.3)
xmlrpc (0.2.1)
$ gem specification openssl
--- !ruby/object:Gem::Specification
name: openssl
version: !ruby/object:Gem::Version
version: 2.0.2
platform: ruby
authors:
- Martin Bosslet
…
test_files: []
$ gem w
$ gem which openssl
/Users/username/.rbenv/versions/2.4.0/lib/ruby/2.4.0/openssl.rb
上ではついでにgemコマンドの利用法などの確認のために インストールの確認された openssl に於いて其のgemの依存関係などをYAML形式で出力させる specification や其の位置を確認する which など試行してみています。 さて、もう一度Homebrewのインストール確認しアップデートの頻繁だと言われる 当該システムを最新にしバージョンを確認します。 併せてgemもアップデートしバージョンを確認します。
$ brew doctor
Your system is ready to brew.
$ brew update
Updated 1 tap (homebrew/core).
==> New Formulae
…
==> Updated Formulae
abcm2ps …
… youtube-dl
==> Renamed Formulae
…
==> Deleted Formulae
ctorrent ee libgroove node@5 s3sync
$ brew -v
Homebrew 1.1.11
Homebrew/homebrew-core (git revision 3217; last commit 2017-03-09)
$ gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.6.10.gem (100%)
Successfully installed rubygems-update-2.6.10
Parsing documentation for rubygems-update-2.6.10
Installing ri documentation for rubygems-update-2.6.10
Installing darkfish documentation for rubygems-update-2.6.10
Done installing documentation for rubygems-update after 23 seconds
Parsing documentation for rubygems-update-2.6.10
Done installing documentation for rubygems-update after 0 seconds
Installing RubyGems 2.6.10
RubyGems 2.6.10 installed
Parsing documentation for rubygems-2.6.10
Installing ri documentation for rubygems-2.6.10
=== 2.6.10 / 2017-01-23
…
=== 2.6.9 / 2017-01-20
…
=== 2.6.8 / 2016-10-29
…
------------------------------------------------------------------------------
…
RubyGems system software updated
$ gem -v
2.6.10
Your system is ready to brew.
$ brew update
Updated 1 tap (homebrew/core).
==> New Formulae
…
==> Updated Formulae
abcm2ps …
… youtube-dl
==> Renamed Formulae
…
==> Deleted Formulae
ctorrent ee libgroove node@5 s3sync
$ brew -v
Homebrew 1.1.11
Homebrew/homebrew-core (git revision 3217; last commit 2017-03-09)
$ gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.6.10.gem (100%)
Successfully installed rubygems-update-2.6.10
Parsing documentation for rubygems-update-2.6.10
Installing ri documentation for rubygems-update-2.6.10
Installing darkfish documentation for rubygems-update-2.6.10
Done installing documentation for rubygems-update after 23 seconds
Parsing documentation for rubygems-update-2.6.10
Done installing documentation for rubygems-update after 0 seconds
Installing RubyGems 2.6.10
RubyGems 2.6.10 installed
Parsing documentation for rubygems-2.6.10
Installing ri documentation for rubygems-2.6.10
=== 2.6.10 / 2017-01-23
…
=== 2.6.9 / 2017-01-20
…
=== 2.6.8 / 2016-10-29
…
------------------------------------------------------------------------------
…
RubyGems system software updated
$ gem -v
2.6.10
愈々本番のsassのインストールです。 インストールが首尾宜しくなったかを確認するにもバージョンを表示させます。 また上で確認したgemコマンドを用いてsassのインストール位置も確認しておきます。
$ gem install sass
Fetching: sass-3.4.23.gem (100%)
Successfully installed sass-3.4.23
Parsing documentation for sass-3.4.23
Installing ri documentation for sass-3.4.23
Done installing documentation for sass after 3 seconds
1 gem installed
$ sass -v
Sass 3.4.23 (Selective Steve)
$ gem w sass
/Users/username/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/sass-3.4.23/lib/sass.rb
Fetching: sass-3.4.23.gem (100%)
Successfully installed sass-3.4.23
Parsing documentation for sass-3.4.23
Installing ri documentation for sass-3.4.23
Done installing documentation for sass after 3 seconds
1 gem installed
$ sass -v
Sass 3.4.23 (Selective Steve)
$ gem w sass
/Users/username/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/sass-3.4.23/lib/sass.rb
確り 整えたRuby環境 の .rbenv ディレクトリ下に入っているのが確認出来ます。 引き続きcompassをインストールし、 バージョンを確認し、 其の位置を確認します。
$ gem install compass
Fetching: multi_json-1.12.1.gem (100%)
Successfully installed multi_json-1.12.1
…(ry
Fetching: rb-inotify-0.9.8.gem (100%)
Successfully installed rb-inotify-0.9.8
Fetching: compass-1.0.3.gem (100%)
Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks!
Successfully installed compass-1.0.3
Parsing documentation for multi_json-1.12.1
Installing ri documentation for multi_json-1.12.1
…(ry
Parsing documentation for compass-1.0.3
Installing ri documentation for compass-1.0.3
Done installing documentation for multi_json, compass-core, compass-import-once, chunky_png, rb-fsevent, ffi, rb-inotify, compass after 6 seconds
8 gems installed
$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2017 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
$ gem w compass
/Users/username/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/compass-1.0.3/lib/compass.rb
Fetching: multi_json-1.12.1.gem (100%)
Successfully installed multi_json-1.12.1
…(ry
Fetching: rb-inotify-0.9.8.gem (100%)
Successfully installed rb-inotify-0.9.8
Fetching: compass-1.0.3.gem (100%)
Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks!
Successfully installed compass-1.0.3
Parsing documentation for multi_json-1.12.1
Installing ri documentation for multi_json-1.12.1
…(ry
Parsing documentation for compass-1.0.3
Installing ri documentation for compass-1.0.3
Done installing documentation for multi_json, compass-core, compass-import-once, chunky_png, rb-fsevent, ffi, rb-inotify, compass after 6 seconds
8 gems installed
$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2017 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
$ gem w compass
/Users/username/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/compass-1.0.3/lib/compass.rb
sass同様此方も確り.rbenv下に入っているのが確認出来ます。 冒頭でRubyGemでインストールされているプログラムリストを確認しましたので インストール後に再度表示して其の差異を見てみます。
$ gem list
*** LOCAL GEMS ***
bigdecimal (default: 1.3.0)
chunky_png (1.3.8)
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5)
did_you_mean (1.1.0)
ffi (1.9.18)
io-console (default: 0.4.6)
json (default: 2.0.2)
minitest (5.10.1)
multi_json (1.12.1)
net-telnet (0.1.1)
openssl (default: 2.0.2)
power_assert (0.4.1)
psych (default: 2.2.2)
rake (12.0.0)
rb-fsevent (0.9.8)
rb-inotify (0.9.8)
rdoc (default: 5.0.0)
rubygems-update (2.6.10)
sass (3.4.23)
test-unit (3.2.3)
xmlrpc (0.2.1)
*** LOCAL GEMS ***
bigdecimal (default: 1.3.0)
chunky_png (1.3.8)
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5)
did_you_mean (1.1.0)
ffi (1.9.18)
io-console (default: 0.4.6)
json (default: 2.0.2)
minitest (5.10.1)
multi_json (1.12.1)
net-telnet (0.1.1)
openssl (default: 2.0.2)
power_assert (0.4.1)
psych (default: 2.2.2)
rake (12.0.0)
rb-fsevent (0.9.8)
rb-inotify (0.9.8)
rdoc (default: 5.0.0)
rubygems-update (2.6.10)
sass (3.4.23)
test-unit (3.2.3)
xmlrpc (0.2.1)
緑字はruby updateでインストールされたgemのリストで 赤字はsass、compass、でインストールされたgemのリストになります。 どうやらインストールは首尾良く運びましたので 実際にCompassを稼働させてみます。 テスト用のディレクトリcompasstestを用意して createコマンドを施しててみます。
$ cd /Users/username/Web/compass/compasstest
$ compass create
directory sass/
directory stylesheets/
create config.rb
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
write stylesheets/ie.css
write stylesheets/print.css
write stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
…(ry
$ compass create
directory sass/
directory stylesheets/
create config.rb
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
write stylesheets/ie.css
write stylesheets/print.css
write stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
…(ry
上記の出力ログ通り、上手く機能しました。 次はwatchコマンドで実際に作業を行なってみると 基本的に機能してはいるのですが其れは警告排出を伴ってもいました。
Last login: Fri Mar 10 15:34:57 on console
$ cd /Users/username/Web/WordPress/html/wp-content/themes/themename
$ compass w
>>> Compass is watching for changes. Press Ctrl-C to Stop.
DEPRECATION WARNING on line 87 of /Users/username/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.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 /Users/username/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.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.
^C
★★★ Happy Styling! ★★★
$ cd /Users/username/Web/WordPress/html/wp-content/themes/themename
$ compass w
>>> Compass is watching for changes. Press Ctrl-C to Stop.
DEPRECATION WARNING on line 87 of /Users/username/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.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 /Users/username/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.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.
^C
★★★ Happy Styling! ★★★
はじめてのCSS設計フロントエンドエンジニアが教えるメンテナブルなCSS設計手法scssファイルからcssファイルに変換するに当たり確り機能はするものの 逐一警告が吐き出される状態が繰り返されます。 此処迄書けば冒頭の Windows10機へのCompassの導入とDEPRECATION WARNING問題 再び は容易に想起されるでしょう。 うっかり其の儘編集に入ると問題はないと思われるものの 警告が出力されるので一応Compassを終了させます。 バックアップを取った後、 警告で指定された87行目などを 前回のようにダブルクォーテーションでエスケープするのではなく 今回はシングルクォーテーションで文字列を括るように書き換える編集を試みてみます。
※編集前
// 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;
}
※編集後
// 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';
}
此の編集の後、再びwatchコマンドを打ち込むと どうやら警告は姿を見せずにくれているようになりました。 過去記事も偶にはそして少なくとも己自身の為にはなってくれるようです。
$ compass w
>>> Compass is watching for changes. Press Ctrl-C to Stop.
write css/style.css
modified sass/css/style.scss
write css/style.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
write css/style.css
modified sass/css/style.scss
write css/style.css