cssスプライトでUndefined mixin 'background-size'.の対処法
過去の備忘録なのですが、sass・scssを使い始めて、Retina対応のcssスプライト画像を自動生成しようと思った矢先、「Undefined mixin 'background-size'.」というエラーに遭遇した時は、ただ単純にミックスインを作ればOKです。
エラーの意味は、「background-sizeのミックスインが定義されてないよ」ってだけのことです。
ソースコードの紹介
cssスプライト画像を作成するためのコードは色んなところで公開されていて、その中にbackground-sizeのミックスインが使われていることがしばしばなのですが、インストールしたcompassにbackground-sizeが定義されていないと、Undefinedのエラーが返ってきます。
自分は下記のような感じでコード記入してミックスインを作成したら、すぐにcssスプライト画像のコードが動いてくれました。
@mixin background-size($a,$b){
-webkit-background-size: $a $b;
-moz-background-size: $a $b;
-o-background-size: $a $b;
background-size: $a $b;
}ちなみにRetina対応のスプライト画像生成コードは色んなやり方がありますが、上記のbackground-sizeのミックスインを用いた方法は、下記サイト様で公開されています。
Retina対応のスプライト画像生成コード
https://maboroshi.biz/clearskysource/?p=608
https://liginc.co.jp/web/html-css/other-html-css/35502
cssスプライトは、自分流に使いやすいようにカスタマイズしておくと、ずっと重宝するので、便利かと思います。
