Tweet

Pocket

レスポンシブ対応のサイトを制作する際、下記の計算式で%のサイズを割り出します。

[求める要素の幅]÷[親要素の幅]×100

通常は上記の計算式で一つ一つ%の値を出してcssに記述していかなければなりません。
ですがsassを使えばいちいち計算をしなくてすみます！

サイト幅を変数化

まずはよく使うサイト幅のサイズを変数にします。

scss

$allWidth:960; // 全体サイズ
$allWidthTb:640; // 全体サイズ（タブレット版）
$allWidthSp:320; // 全体サイズ（SP版）

@mixinで計算式を定義しておく

@mixinを使ってサイズを割り出す計算式をmargin用、padding用、width用、height用とそれぞれ定義しておきます。
（marginとpaddingはまとめて指定出来る用とそれぞれの箇所に個別に指定出来る用と作っておきます。）

scss

// margin ---------------------------------
@mixin marginPc($top, $right, $bottom, $left) {
	margin:($top / $allWidth) * 100% ($right / $allWidth) * 100% ($bottom / $allWidth) * 100% ($left / $allWidth) * 100%;
}

@mixin marginTPc($mt) {
	margin-top:($mt / $allWidth) * 100%;
}

@mixin marginRPc($mr) {
	margin-right:($mr / $allWidth) * 100%;
}

@mixin marginBPc($mb) {
	margin-bottom:($mb / $allWidth) * 100%;
}

@mixin marginLPc($ml) {
	margin-left:($ml / $allWidth) * 100%;
}

// padding ---------------------------------
@mixin paddingPc($top, $right, $bottom, $left) {
	padding:($top / $allWidth) * 100% ($right / $allWidth) * 100% ($bottom / $allWidth) * 100% ($left / $allWidth) * 100%;
}

@mixin paddingTPc($pt) {
	padding-top:($pt / $allWidth) * 100%;
}

@mixin paddingRPc($pr) {
	padding-right:($pr / $allWidth) * 100%;
}

@mixin paddingBPc($pb) {
	padding-bottom:($pb / $allWidth) * 100%;
}

@mixin paddingLPc($pl) {
	padding-left:($pl / $allWidth) * 100%;
}

// width ----------------------------------
@mixin widthPc($wid) {
	width:($wid / $allWidth) * 100%;
}

// height ---------------------------------
@mixin heightPc($hei) {
	height:($hei / $allWidth) * 100%;
}

@includeで@mixinを呼び出す

計算された値を読み込みたい箇所に@includeを使って@mixinで定義した計算式を読み込みます。

scss

#contents {
	@include marginPc(10,20,30,40);
	@include marginTPc(10);
	@include marginRPc(20);
	@include marginBPc(30);
	@include marginLPc(40);
	@include paddingTPc(10);
	@include paddingRPc(20);
	@include paddingBPc(30);
	@include paddingLPc(40);
	@include widthPc(200);
	@include heightPc(100);
}

※「()」の中にはpxでの値を入れます。

CSSでの表示

CSSにコンパイルすると下記のように@includeの「()」に指定した値が@mixinの計算式で計算されて出力されます。

css

#contents {
	margin: 1.04167% 2.08333% 3.125% 4.16667%;
	margin-top: 1.04167%;
	margin-right: 2.08333%;
	margin-bottom: 3.125%;
	margin-left: 4.16667%;
	padding-top: 1.04167%;
	padding-right: 2.08333%;
	padding-bottom: 3.125%;
	padding-left: 4.16667%;
	width: 20.83333%;
	height: 10.41667%;
}