margin & padding レスポンシブ対応 SCSS Mixin

10no Published: Categories: Webデザイン

PC、タブレット、スマホでの隙間を気にするクライアントへの対応、すっごく時間がかかりますよね。
そんな時、時短になるように他ブログを参考にしてMixin考えました。

参考記事サイト：コリス「[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる」

参考記事はフォントサイズですが、それを応用して画面サイズに合わせてMixinを用意しました。

使い方

  1. 適当なscssファイルに下記mixinを貼り付ける。
  2. 呼び出し方は @include mp(隙間のタイプ,スマホの隙間の大きさ,大きい画面サイズの隙間の大きさ,スマホサイズ,PC画面サイズ);
  3. 例：@include mp(margin-top,20,40);
  4. 画面サイズは省略しても大丈夫
  5. 隙間のタイプ対応は以下の通り
    • margin
    • margin-top
    • margin-bottom
    • margin-left
    • margin-right
    • padding
    • padding-bottom
    • padding-top
    • padding-left
    • padding-right
@mixin mp($type, $minsize: 20, $maxsize: 40, $minvw: 375, $maxvw: 1200) {
	// 呼び出し方
	// @include mp(margin-top,20,40);
	// $maxvw以上は別途CSSが必要です！
	$sizeCalc: ($maxsize - $minsize);
	$viewportDifference: ($maxvw - $minvw);
	$maxsizeCalc: 100 * $sizeCalc / $viewportDifference;

	@if $type==margin {
		margin: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==margin-top {
		margin-top: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==margin-bottom {
		margin-bottom: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==margin-left {
		margin-left: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==margin-right {
		margin-right: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==padding {
		padding: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==padding-top {
		padding-top: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==padding-bottom {
		padding-bottom : calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==padding-left {
		padding-left: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else if $type==padding-right {
		padding-right: calc(#{$minsize * 0.1}rem + ((1vw - #{$minvw / 1000}rem) * #{$maxsizeCalc}));
	}

	@else {
		@error "Unknown direction #{$type}.";
	}
}

注意点

$maxvw で指定しているサイズ以上を相対的ではなく固定にする時はメディアクエリーで別途指定が必要です。