stylusでbackgroundに指定した画像のサイズ変更に対応する。

スマートフォン向けのcssを書く場合、アイコンなど背景画像として設置することが多いですが、device-pixel-ratioに合わせて高解像度用の画像を用意し、background-sizeでratioの比率に縮小することが多いです。

このとき結構困るのが画像のサイズ、特に横幅が変わってしまうといちいちcssで指定しているbackground-sizeも変えないとならないので、運用を考えると結構めんどくさいです。

うまい方法ないかなぁと考えてたら、stylusに画像サイズを取得するimage-size関数が用意されてたんですね。。。

iconPath = '../images/icon.png'
.icon
  display block
  height 20px
  width @height
  background-image url(iconPath)
  tmp = image-size(iconPath)
  h = tmp[0]/2
  w = tmp[1]/2
  background-size h w

こんな感じで指定してやると、

.icon{
	display: block;
	height: 20px;
	width: 20px;
	background-image: url("../images/icon.png");
	background-size: 500px 50px;
}

半分の画像サイズの値でCSSがコンパイルされてきます(icon.pngは1000px x 100pxの画像)

こうすることで背景に使っている画像のサイズ変更に簡単に対応することができました。

background-positionを%など相対表記していると結局ずれてしまいますが、
僕の場合、アイコンはほとんど::beforeか::after疑似要素を作ってそこに画像を表示させているので、background-positionによるズレを気にしなくてすみました。

最近Sass使ってないから分からないけど、同じような方法がSassにもあると嬉しいなぁ。。

stylusでbackgroundに指定した画像のサイズ変更に対応する。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です