min-margin、max-margin、min-padding、max-paddingをSassとメディアクエリで実装。

サイトを制作時に「max-margin、min-margin、max-padding、min-padding」があればなと思う事がよくあります。今のところはそのようなcssプロパティーは存在しないので、Sass関数を使ってメディアクエリでいい感じに実装したいと思います。

メディアクエリで代替え案を考える

ウィンドウの横幅を100として、何％（vw）で伸縮するかを決め、最小値と、最大値からブレイクポイントを計算します。

例）

• 最大値: 32px;
• 最小値: 8px;
• 流動値: 2vw;

最小値のに対してのブレイクポイントの求め方

※数値に単位があるためこのままでは利用できません。

@media (max-width: (100 / 2vw) * 8px - 0.02) {
    property: 8px;
}

流動値（2％）の範囲のブレイクポイントの求め方

※数値に単位があるためこのままでは利用できません。

@media (min-width: (100 / 2vw) * 8px) and (max-width: (100 / 2vw) * 32px) {
    property: 2%;
}

Sass関数（min-margin、max-margin, min-padding、max-padding）

最大値をベースに先ほどの式を当てはめていきます。単位があると計算できないので、単位を削除する関数とブレイクポイントをpxで計算しているのでem、remをpxに変換する関数も一緒に用意します。

// 値から単位を削除
@function strip-unit($number) {
    @if type-of($number) == "number" and not unitless($number) {
        @return $number / ($number * 0 + 1);
    }
    @return $number;
}

// pxに変換
$base-size: 16px; // 1emのpxサイズ
@function topx($size, $base-size: $base-size) {
    $unit: unit($size);

    @if $unit == "em" {
        @return strip-unit($size) * $base-size;
    }
    @else if $unit == "rem" {
        @return strip-unit($size) * $base-size;
    }
    @else {
        @return $size;
    }
}

min-margin、max-margin

@mixin minax-margin($prop: margin, $min: 8px, $max: 32px, $vw: 2vw) {
    $min: topx($min); $max: topx($max);

    #{$prop}: $max;
    @media (min-width: strip-unit(100 / $vw) * $min) and (max-width: strip-unit(100 / $vw) * $max) {
        #{$prop}: $vw;
    }
    @media (max-width: strip-unit(100 / $vw) * $min - 0.02) {
        #{$prop}: $min;
    }
}

min-padding、max-padding

@mixin minax-padding($prop: padding, $min: 8px, $max: 32px, $vw: 2vw) {
    $min: topx($min); $max: topx($max);
    
    #{$prop}: $max;
    @media (min-width: strip-unit(100 / $vw) * $min) and (max-width: strip-unit(100 / $vw) * $max) {
        #{$prop}: $vw;
    }
    @media (max-width: strip-unit(100 / $vw) * $min - 0.02) {
        #{$prop}: $min;
    }
}