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

Css

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

2020年03月28日

も く じ

  1. メディアクエリで代替え案を考える
  2. Sass関数(min-margin、max-margin, min-padding、max-padding)

サイトを制作時に「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;
    }
}

フェイスブックでシェア ツイッターでシェア

noteQiitaGitHubTwitter

© Oclockten.com