cssスプライトでUndefined mixin 'background-size'.の対処法

HTML/CSS

過去の備忘録なのですが、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のミックスインを用いた方法は、下記サイト様で公開されています。

cssスプライトは、自分流に使いやすいようにカスタマイズしておくと、ずっと重宝するので、便利かと思います。

この記事をSNSでシェアする?

cssスプライトでUndefined mixin 'background-size'.の対処法


  • このエントリーをはてなブックマークに追加
  • Pocket