[SASS] 最大ブラウザ幅以上になるとvwをpxに変換するmixin

「リキッドデザインにしたい！でもブラウザ幅が大きくなりすぎると要素も大きくなり過ぎて見辛い！」となったので、最大ブラウザ幅を越えるとvw値からpx値に変換してくれるmixinを作りました。
（一定幅から固定値になるレイアウト指定を、フレキシブルデザインというらしい）

やっていること

• デザインデータのアートボードサイズと要素のpx値から、vwを計算
• ブラウザ幅が一定値を超えたら、px値に変換してサイズを固定する
• この時↑のpx値は、ブラウザ幅が最大の時のvw計算時のpxの値

使い方

例えば、デザイン上で要素が330pxのとき

sass

 //引数に、プロパティとpx値を渡す
 .sample {
   @include mq-liquid(width, 330);
 }

コンパイル後↓

caa

 //ブラウザ幅が最大（768px）以下のとき
 .sample {
   width: 85.27132vw;
 }
 
  //ブラウザ幅が最大（768px）以上のとき
 .sample {
   width: 654.88372px;
 }

mixinを作る

sass

 //①ブレークポイントを変数に代入する 
 $base-width: 387;  //アートボードサイズ
 $max-width: 768;

 //②breakpointのMapを作る
 $breakpoints: (
   m: 'only screen and ( min-width: calc(#{$base-width} + 1px) )', //769px以上の時
 );

 //③要素のpxから、vwを求める関数
 @function calc-vw($item-width) {
   @return $item-width / $base-width * 100vw;
 }
 
 //④要素のpxから、$max-width（最大画面幅）の時のvwを求める関数
 @function calc-vw-isMax($item-width) {
   @return $item-width / $base-width * $max-width;
 }

 //⑤画面幅に応じて適応される関数が変わるmixinを作る。
 //引数は、（cssプロパティ、値、ブレイクポイント）
 @mixin mq-liquid($property, $value, $breakpoint:m) {
   @media only screen and #{map-get($breakpoints, $breakpoint)} {
     #{$property}: calc-vw-isMax($value); 
   }
   #{$property}: calc-vw($value);
 }