レスポンシブで使うmixin

自分がレスポンシブで使っているmixinのコードを紹介します。
割り算はDart Sass 2.0.0に対応した書き方にしています。(詳細はこちら)

PCでvw指定、SPでvw指定ができるmixin

基本的な計算方法としてはPCとSPともに
デザイン上の数値 ÷ デザイン上の横幅サイズ × 100 (単位[vw])
としています。

今回の例ではPCデザイン1400px、SPデザインが375pxで作られている想定でのmixinになります。

@use 'sass:math';
@use './_mixin.scss' as mixin;

/* デザインサイズ → 必要に応じて変更*/
//PCデザイン横幅
$mediaQueryPcBase: 1400;
//SPデザイン横幅
$mediaQuerySpBase: 375;

//PC vw指定 SP vw指定
@mixin mediaQueryPcVwSpVw($property,$valuePC,$valueSP) {
 // margin: 10 10 20 10 のようにショートハンドで書きたい場合
 @if(type-of($valuePC) == list){
   // PCの場合
   @media all and (min-width: 769px) {
     $vwNumber:();
     @for $i from 1 through length($valuePC) {
       @if(type-of(nth($valuePC,$i)) == number){
         $vwNumber: append($vwNumber,math.div(nth($valuePC, $i),$mediaQueryPcBase) * 100vw);
       } @else{
         $vwNumber: append($vwNumber,nth($valuePC, $i));
       }
     }
     #{$property}: $vwNumber;
   }
   //SPの場合
   @media all and (max-width: 768px) {
     $vwNumber:();
     @for $i from 1 through length($valueSP) {
       @if(type-of(nth($valueSP,$i)) == number){
         $vwNumber: append($vwNumber,math.div(nth($valueSP, $i),$mediaQuerySpBase) * 100vw);
       } @else{
         $vwNumber: append($vwNumber,nth($valueSP, $i));
       }
     }
     #{$property}: $vwNumber;
   }
 }
 // margin-top: 10 のような場合
 @else {
 　　　　// PCの場合
   @media all and (min-width: 769px) {
     #{$property} : math.div($valuePC, $mediaQueryPcBase) * 100vw;
   }
   // SPの場合
   @media all and (max-width: 768px) {
     #{$property} : math.div($valueSP, $mediaQuerySpBase) * 100vw;
   }
 }
}

＊注意＊
#{$property}が書かれている行がグレーアウトしていますが、コメントアウトではありません！(すみません、note上の仕様なのか色が付いてくれないです…)

SCSS指定の仕方 

@include mixin.mediaQueryPcVwSpVw(CSSプロパティ,PC値,SP値);
第1引数はレイアウト調整で使用するCSSプロパティであれば、基本的に入れられます。
第2引数はPC時の数値を入れられます。ショートハンドで書きたければ、ショートハンドでも書けます。
第3引数はSP時の数値を入れられます。こちらもショートハンドで書きたければ、ショートハンドでも書けます。

@use './_mixin.scss' as mixin;

/* width */
@include mixin.mediaQueryPcVwSpVw(width,400,250);

/* margin */
@include mixin.mediaQueryPcVwSpVw(margin-top,20,30);
@include mixin.mediaQueryPcVwSpVw(margin-left,20,30);
@include mixin.mediaQueryPcVwSpVw(margin-bottom,20,30);
@include mixin.mediaQueryPcVwSpVw(margin-right,20,30);
@include mixin.mediaQueryPcVwSpVw(margin,20 auto,20 auto);

/* padding */
@include mixin.mediaQueryPcVwSpVw(padding-top,20,30);
@include mixin.mediaQueryPcVwSpVw(padding-left,20,30);
@include mixin.mediaQueryPcVwSpVw(padding-bottom,20,30);
@include mixin.mediaQueryPcVwSpVw(padding-right,20,30);
@include mixin.mediaQueryPcVwSpVw(padding,20 30 30,20 20 30);

/* font-size */
@include mixin.mediaQueryPcVwSpVw(font-size,16,12);​

 状況に応じて、PCで％指定、SPでvw指定をしたい、またはPCでpx指定、SPでvw指定したい等いろいろあると思います、今回自分が紹介させていただいたコードを改変して計算する単位を変えてみるのもありかと思います。

あまり良い書き方ではないかもしれませんので、あくまで参考程度にみていただけたらと思います🙇‍♂️

参考記事
フォントや画像をvwで指定するmixin - レスポンシブしやすい設計方法
https://yumegori.com/font-img-vw-setting-method

レスポンシブWebデザインでハマりがちな%指定
https://design-spice.com/2014/03/24/percentag/