NO IMAGE

SassでCSS記述の効率アップ

  • 2012年6月22日
  • 2013年11月7日
  • Sass (SCOUT)
  • 26view
  • 0件

SassではCSSでは書けない変数や関数を使ったプログラム的な記述が可能です。あまり、複雑な事をやると後々何をやったんだっけ???状態になるので凝り過ぎてもいけませんが・・・。

これまでメディアクエリーを使い、ウィンドウ幅が639px以下なら、CSSの記述で画像サイズを縮小させていました。

CSS(style.css)ファイルの中身(概略)


ここでは img を原寸大の指示 (HTML側のサイズ指定で表示・・・特にサイズ指定なし)
ここでは img を原寸大の指示 (HTML側のサイズ指定で表示・・・特にサイズ指定なし)
ここでは img を原寸大の指示 (HTML側のサイズ指定で表示・・・特にサイズ指定なし)
  :

@media screen and (max-width: 639px) {

 この中で img を縮小指示 (width:272px固定、縦横比が同じになる様にheightを指定)
 この中で img を縮小指示 (width:272px固定、縦横比が同じになる様にheightを指定)
 この中で img を縮小指示 (width:272px固定、縦横比が同じになる様にheightを指定)
   :


しかし、使用する画像サイズはその時々で様々です。パノラマ風の横長サイズもあれば、縦長写真もあれば、トリミング依頼があったり、トリミング禁止もあり、画像の縦横サイズはバラバラで増えて行きました。

これをスマートフォン対応の為に、大量にある画像の縦横サイズ毎に、HTMLとCSS内でclassセレクタを記述し、heightを計算して書き込んで行くのも面倒です。しかも、上記のように、@mediaの前と内部の2箇所に記述を書かなければならないのも縦スクロール酔いしそうで億劫でした。(別ファイルにする手もあるのでしょうが・・・)

そこで、画像の縦サイズと横サイズを配列変数に入れ、あとは自動的に生成してくれるようにしました。

Sass(style.scss)ファイルの中身(概要)




$imax: 33; //配列内の要素数
$yoko: 240 240 200 260 282 300 300 313 ・・・ 590 590; //画像の横サイズを配列にセット
$tate: 204 409 300 347 265 118 320 313 ・・・ 350 399; //画像の縦サイズを配列にセット

// ■■■配列を使用して「通常(PC)表示」セレクタを生成■■■ //
@for $i from 1 through $imax {
	/* ■■■通常(PC)表示■■■ */
	[role="main"] .entry-image-#{nth($yoko,$i)}-#{nth($tate,$i)} {
		float: right;
		width: #{nth($yoko,$i)}px;
		padding: 0px 5px 10px 5px;
	}
	[role="main"] .entry-image-#{nth($yoko,$i)}-#{nth($tate,$i)} .text {
		width: #{ nth($yoko,$i) - 20 }px;
		background-color: #0066CC;
		padding: 0px 10px 0px 10px;
		text-align: left;
		color: #ffffff;
	}
}

@media screen and (max-width: 639px) {

	// ■■■配列を使用して「縮小表示」セレクタを生成・・・画像の高さは縦横比を変えず算出■■■ //
	@for $i from 1 through $imax {
		/* ■■■縮小表示■■■ */
		[role="main"] .entry-image-#{nth($yoko, $i)}-#{nth($tate, $i)} {
			width: 272px;
		}
		[role="main"] .entry-image-#{nth($yoko, $i)}-#{nth($tate, $i)} img {
			width: 272px;
			height: #{round((nth($tate, $i)*272)/nth($yoko, $i))}px;
		}
		[role="main"] .entry-image-#{nth($yoko, $i)}-#{nth($tate, $i)} .text {
			width: 252px;
		}
	}

}


これで、画像が増えても、$imaxの値(配列要素数)を増やし、$yoko配列に画像の横幅、$tate 配列に画像の縦幅を入力して、保存すれば、自動的にセレクタを生成してくれます。

コピペして、セレクタ名(縦横サイズを付加)を替え、縮小側のセレクタでは、縦幅をいくらにしたら良いか計算して記述する必要がなくなりました。

でも、そもそも画像サイズを取得してセレクタを増やさずに縮小する方法があるのかも???
・・・全く・・・根本原因を棚上げして・・・とりあえずこれで突っ走ります。^^