chlonolog

web, digital gadgets, and more.

SASSの罠(!default)にハマる

今までは、LESSを好んでずっと使用していました。しかし、昨今はどうやらLESSよりSASSの方が強い模様。BootswatchもVer.4はSASSのみ配布になってしまっていますし。
ということで、これを機にSASSへ(しぶしぶ)切り替えることにしました。
SASSも基本の部分はLESSとさほど変わらないので、学習コストは非常に低かったと思います。@extendと@includeでちょっと首をひねったぐらいですかね。

なぜか値が反映されない……?

しかしBootswatchのファイルを読み込もうとしたところで、予想外につまづきました。


LESSの頃は、

@import "bootstrap/bootstrap.less";             //Bootstrap
@import "bootswatch/sandstone/variables.less";  //Bootswatchの色設定
@import "bootswatch/sandstone/bootswatch.less"; //Bootswatchのメイン

でちゃんと反映されていました。
なのに、同じように書いているにも関わらず、SASSではどーーーやっても反映されません。何が悪いのかも分からず、hexo cleanしてはリロード、ファイルの位置を確認してはリロードの繰り返し。

結局何が悪かったのかというと、

@import "bootswatch/sandstone/variables";  //Bootswatchの色設定
@import "bootstrap/bootstrap";             //Bootstrap
@import "bootswatch/sandstone/bootswatch"; //Bootswatchのメイン

えっ、順番……?
Bootstrapを全部読み込んだあとに色設定を読み込んだら、追加分が上書きで反映されるんじゃないの? まさか、SASSの場合はそうじゃないんですかね。いやいや、そんなばかな。
でも同じクラスに対して指定されているし、importantとか設定されてないし、BootstrapとBootswatchのバージョンもちゃんと同じだし、一体どういうことなんだろう……ぐぬぬ。
とりあえず期待通り反映されていますし、他の部分については問題なく動いているので、気持ち悪いですが今はよしとしておきます。


理由判明(7/24追記)

どうやらSassの!defaultフラグが原因だったみたいです。
!defaultがついている変数に対しては、

  • 同じ変数が、!defaultの行より「前に定義されていた」場合
    → 上書きしない(=先に定義した値を生かす)
  • 同じ変数が、!defaultの行より「前に定義されていなかった」場合
    → !defaultの値を使用する
  • 同じ変数が、!defaultの行より「後に定義されていた」場合
    → !defaultの値を使用する(=後から上書きできない)

という動作をするらしいです。
つまり、今回は3番目の「後に定義されていた場合」に引っかかり、どんなに頑張っても上書きが適わなかったという訳です。
分かってしまえば納得ですが、これは立派な罠だ……。

参考:


Font Awesomeは4→5で書き方が変わっていた

もうひとつ罠がありました。
Font Awesomeが表示されないので調べてみたら、バージョンがいつの間にか5に上がっていて、そのせいで記述方法が変わっていたのです。

Font Awesome 5をSASSで使う場合は、

$fa-font-path: "fontawesome/webfonts";
@import 'fontawesome/scss/variables';
@import 'fontawesome/scss/mixins';
@import 'fontawesome/scss/core';
@import 'fontawesome/scss/larger';
@import 'fontawesome/scss/fixed-width';
@import 'fontawesome/scss/list';
@import 'fontawesome/scss/bordered-pulled';
@import 'fontawesome/scss/animated';
@import 'fontawesome/scss/rotated-flipped';
@import 'fontawesome/scss/stacked';
@import 'fontawesome/scss/icons';
@import 'fontawesome/scss/screen-reader';
@import 'fontawesome/scss/fa-brands';
@import 'fontawesome/scss/fa-solid';

.article-share-twitter:before {
  @include fa-icon;
  @extend .fab;
  content: fa-content($fa-var-twitter);
}

とか書くらしいです。fa-content()に設定する変数は、scss/_variables.scss参照。
ちなみに larger・borderd-pulled・animated・rotated-flipped・stacked・screen-reader は、うちでは使っていないのでコメントアウトしています。

やはりWeb界隈は定期的に情報を仕入れていないと詰まるなあ、と改めて実感した次第です。

コメント

© 2018 chlono