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に指定した画像のサイズ変更に対応する。

stylusを使ってみる。

最近ではCSSをコーディングするのにも、CSSフレームワークを使って行うことが増えてきました。
僕自身Sassを使うことが多いのですが、node.jsのモジュールの一つにStylusというCSSフレームワークが結構いい感じなので、ちょっと遊んでみた。

node.jsのインストールなどは、他の方が分かりやすくまとめていらっしゃるので、割愛。

Stylus

node.jsのexpressというモジュール入れて、実行すればstylusが使えるようになるので面倒な人はそれでいいかと。僕はめんどくさがりなので、expressで突っ込みました。

stylusはsassの記法と同じような感じで、{}や:や;を使わずにタブかスペースのインデントを入れ子にして書いて行く事ができる。

.sample
	padding 5px
	a
		display block
		border solid 1px red
		&:hover
			background blue

のように書くと…

.sample {
	padding: 5px;
}
.sample a {
	display: block;
	border: solid 1px #f00;
}
.sample a:hover {
	background: #0f0;
}

と吐き出される。

もちろん変数も使えるので、

bgcolor = #ccc
.sample
	background-color bgcolor

のように書ける。

個人的にsassと比べてstylusが便利だなと感じたのは、ブロックレベルでのプロパティ値の参照と親に戻れる仕組み。
例えば、

.sample
	width 12px
	height @width
	.parents &
		border solid 1px red

と書くと、

.sample {
	width: 12px;
	height: 12px;
}
.parents .sample {
	border: solid 1px #f00;
}

のように吐き出される。

@を付けてプロパティ名を指定すると、そのブロック内で指定したプロパティに設定した値が参照できるので、同じ値を入れる必要も無くなるし変更もしやすい。

また、&を使う事で、それまでのセレクタの前にセレクタを挟み込む事ができるので、
ある要素のStyleを記述していて、親のclassなどのセレクタによって表示を変えたいような場合に、構造を保って書いて行けるので慣れれば管理しやすくてかなり便利かなぁと思っている。

詳しくはTry Stylus Onlineに分かりやすく説明があるので気になる人は使ってみるといいかも。

慣れればsassよりも使いやすいのかなぁ。

11/30追記

Sassもvar 3.0以降で親に戻るセレクタが用意されてたみたいです。

stylusを使ってみる。