eye-catch-scss

何度も言うけど、scss + compassはとてもステキ。1年ぐらい前に書いたリティーナディスプレイに対応した画像置換をするscssのmixinの使用頻度が高いので、皆さんに共有したいと思います。


事前準備

普通の画像例:head-logo.pngと、名称の最後に「@2x」をつけたリティーナディスプレイ用の画像例:head-logo@2x.pngを準備し、同じフォルダーに格納。


Mixinの記述


scssの記述


コンパイル後のcss

Compassにはimage-width,image-heightを利用することで、画像のサイズを自動で読み取ることができるので、その機能を利用。とっても便利ですね。また、リティーナディスプレイに対応するための@mediaの記述を外出しにしているのは、対応しないといけないデバイスサイズが、あれよあれよと増えてくるため、他のリティーナディスプレイ用に書いたscssも一括で修正できるようにしてます。

まだまだ、便利なscssMixinはあるので、少しづつ更新していこうかな。

page
1 / 1