スマホコーディングにおいて、vwとvhをデザイン幅に沿ってピクセルから自動換算するためのscss

デザインファイルが
横幅750px縦は1334pxだという想定で、
縦横のマージンをvh
横のマージンをvw
でピクセルから換算するscssです。

サイズに関してはデザインファイルをみて値を調整してね。

unitというのはピクセル単位のことで定義は
-100から100を５ピクセル毎で、定義しているよ☆

_variable.scss

$units  : -100,-95,-90,-85,-80,-75,-70,-65,-60,-55,-50,-45,-40,-35,-30,-25,-20,-15,-10,-5,0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100;

それを召喚してvhとvwに変換

_margin.scss

@each $unit in $units {
    .sp-mt#{$unit}{
      margin-top: #{decimal-round(($unit / 13.34),3)}vh!important;
    }
    .sp-mb#{$unit}{
      margin-bottom: #{decimal-round(($unit / 13.34),3)}vh!important;
    }
    .sp-mr#{$unit}{
      margin-right: #{decimal-round(($unit / 7.5),3)}vw!important;
    }
    .sp-ml#{$unit}{
      margin-left: #{decimal-round(($unit / 7.5),3)}vw!important;
    }
}

小数点以下3桁で切るのに関数も使っている、引用元忘れました。。。すみません

_fuctions.scss

@function decimal-round($number, $digits: 0, $mode: round) {
  $n: 1;
  @if type-of($number) != number {
    @warn '#{ $number } is not a number.';
    @return $number;
  }
  @if type-of($digits) != number {
    @warn '#{ $digits } is not a number.';
    @return $number;
  } @else if not unitless($digits) {
    @warn '#{ $digits } has a unit.';
    @return $number;
  }
  @if $digits > 0 {
    @for $i from 1 through $digits {
      $n: $n * 10;
    }
  }
  @if $mode == round {
    @return round($number * $n) / $n;
  } @else if $mode == ceil {
    @return ceil($number * $n) / $n;
  } @else if $mode == floor {
    @return floor($number * $n) / $n;
  } @else {
    @warn '#{ $mode } is undefined keyword.';
    @return $number;
  }
}

@function decimal-ceil($number, $digits: 0) {
  @return decimal-round($number, $digits, ceil);
}

@function decimal-floor($number, $digits: 0) {
  @return decimal-round($number, $digits, floor);
}

これでデザインファイル通りに
.sp-mt30
とすれば総体的な空きができるのことです。

ネガティブマージンの場合は
.sp-mt-30
とかって表現できる。

vwはわりと見かけるけどvhはあんまりなかったので投稿してみました。