【SCSS】PC〜タブレットをよしなにコーディングするためのVW関数

PC〜タブレットをよしなにコーディングするためのSCSS関数を作成したのでメモ。

• vwMinはPCの基本サイズをベースにvw値を算出
• vwClampは最小値も指定することが可能。
  デフォルトだと引数の0.8掛け。第二引数で任意のpx値を指定することも可能

$pcCompWidth: {PCの基本サイズを指定};

@function pcVw($num, $width: $pcCompWidth) {
	@return calc(1vw * $num / $width * 100);
}

@function vwMin($num) {
	@return min(pcVw($num), $num * 1px);
}

@function vwClamp($num, $min: null) {
	@if $min == null {
		@return clamp(calc($num * 0.8 * 1px), pcVw($num), $num * 1px);
	} @else {
		@return clamp($min * 1px, pcVw($num), $num * 1px);
	}
}