19
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

【メモ】SassバージョンアップしたらCompassでwarningが出る

はじめに

こんにちは。

会社で利用している自身に割り当てられたパソコンを今回変えることになり、
ようやくデータ移行が終わりました。

息抜きがてらメモしときます。

遭遇

移行の際、Sassとか最新でもええやん!(現行3.4.22、前は3.4.16)と思って
バージョンアップしたらコンパイルするたびwarningを吐くCompassさんに遭遇。

どんなエラーか

DEPRECATION WARNING on line 87 of %RUBY_DIR%/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.

みたいなのがつらつらと。
Compassの stylesheets/compass/css3/_deprecated-support.scss の #{} の書き方が気に食わない、っていうのだけフィーリングで伝わってきます。

(あ。Windows7 64bitな環境です…)

解決

頑張って調べると overstackflow に答えが。

#{'$hoge'}foo-bar    // 気に入らない
'#{"$hoge"}foo-bar'  // こう書いて 

みたいな…。
とりあえず上記のように該当箇所を修正すると出なくなった!

終わりに

調べていたらダウングレードの例もありましたが、やっぱ不具合修正されているなら…。
と思ったので、ダウングレードしたくない方に届けば幸いです。

蛇足

Sass 3.4.22のリリースノートにCSS variablesって文字がリンクになってたので、
気になって飛んでみました。

CSS Variables
https://www.w3.org/TR/css-variables/

:root {
  --black: #000000;
}
a {
  color: var(--black);
}

変数定義というか、カスタムプロパティって表現になってますけど。
デフォルトで使えると、楽になるのかなあ…。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
19
Help us understand the problem. What are the problem?