compassのcssスプライトでUndefined mixin 'background-size'.となる時の対処法

web制作

読了の目安時間: 128

過去の備忘録なのですが、sass・scssを使い始めて、Retina対応のcssスプライト画像を自動生成しようと思った矢先、「Undefined mixin 'background-size'.」というエラーに遭遇した時は、ただ単純にミックスインを作ればOKです。

エラーの意味は、「background-sizeのミックスインが定義されてないよ」ってだけのことですので。

cssスプライト画像を作成するためのコードは色んなところで公開されていて、その中にbackground-sizeのミックスインが使われていることがしばしばなのですが、インストールしたcompassにbackground-sizeが定義されていないと、Undefinedのエラーが返ってきます。

自分は下記のような感じでコード記入してミックスインを作成したら、すぐにcssスプライト画像のコードが動いてくれました。

ちなみにRetina対応のスプライト画像生成コードは色んなやり方がありますが、上記のbackground-sizeのミックスインを用いた方法は、下記サイト様で公開されています。

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

最後に一言

ミックスインのポップさたるや。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

compassのcssスプライトでUndefined mixin 'background-size'.となる時の対処法


本記事のシェアはこちらから!

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

PROFILE

yoshi

follow us in feedly

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。普段はWEB制作をやっています。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。