メディアクエリー

メディアクエリーは Sass ミックスインを活用し実装効率化しています。
案件にもよりますが、768px をブレークポイントとし、以上を PC（デスクトップ）、以下を SP（スマートフォン）として、それぞれメディアクエリーを内包したミックスインを定義しています。
セレクターごとに各メディアクエリーのスタイルを指定します。

.cExample {
  // 共通スタイル
  @include media-pc {
    // PC用スタイル
  }
  @include media-sp {
    // SP用スタイル
  }

  &-child {
    // 共通スタイル
    @include media-pc {
      // PC用スタイル
    }
    @include media-sp {
      // SP用スタイル
    }
  }
}

VS Code スニペット

毎回手入力するのは面倒なので、VS Code のスニペットを登録し mq（mqp で PC、mqsで SP のみ）と打つだけで以下のコードがすべて展開されるようにして効率化しています。

@include media-pc {
}
@include media-sp {
}

コード圧縮

メディアクエリーをセレクターごとに書くと、コンパイル後の CSS ではメディアクエリー文が大量に出力されてしまいます。
コンパイル後の gulp-postcss の処理時に css-mqpacker を使うことで、同じメディアクエリー文を一つにまとめてコード数を減らすことができます。
details-pug-template/gulp-postcss.js at vp1 · Studio-Details/details-pug-template

レスポンシブ

ディテイルズでは基本的にデザインの再現性を保つために、フォントサイズ含めすべての要素のサイズをウィンドウ幅によって拡大・縮小する可変サイズで実装してます。

html タグの font-size を 100vw にして、各要素のサイズを rem の単位で指定することで html タグのフォントサイズ（100vw）が基準となるので、すべてのサイズがウィンドウ幅を基準としたサイズにできます。

サイズを指定するときは、直接 rem 単位で指定せずに size-variable-pc, size-variable-sp の独自 Sass 関数を使用します。
引数の値は PSD と同じサイズの px 値を指定するだけです。
いちいち手動や脳内で計算する必要はありません。
px の単位は付けても付けなくてもどちらでも大丈夫です。PSD の値をコピペするときにいちいち px 単位を付ける必要はありません。

フォントサイズのみ、 font-size-variable-pc, font-size-variable-sp のミックスインを使用します。
このミックスインを使うと、ウィンドウ幅が狭くなり 10px 以下、または第 2 引数で指定した px 数以下となるフォントサイズ以下になったとき、それ以上小さくならないようなメディアクエリーが自動的に追加されます。

SP デザインの PSD はブラウザ上の表示の 2 倍サイズで作成されているため、size-variable 関数と font-size-variable ミックスインのどちらも SP のほうは PSD の値のままの 2 倍サイズで指定します。

@include media-pc {
  @include font-size-variable-pc(16);
  width: size-variable-pc(200);
}
@include media-sp {
  @include font-size-variable-sp(30); // ブラウザ上では 15px
  width: size-variable-sp(200); // ブラウザ上では 100px
}

引数の値が 100%となる基準のウィンドウ幅は、 src/modules/css/abstracts/size.scss 内の $base-width-pc, $base-width-sp の値に PSD のアートボードの幅を指定します。

VS Code スニペット

メディアクエリー同様、VS Code のスニペットを活用しています。

行間

line-height は、スニペットで登録した以下の形式のコードで指定します。

line-height: (40 / 30);

分子は PSD の「行送り」の値、分母は「フォントサイズ」の値です。

トラッキング

PSD のトラッキング値は、以下の mixin で反映できます。

@include tracking(50);

Zeplin の場合は letter-spacing を使い、値を size-variable で指定します。
ただし、この形式の場合は SP の指定も必要になります。

@include media-pc {
  letter-spacing: size-variable-pc(3.6px);
}
@include media-sp {
  letter-spacing: size-variable-sp(3.6px);
}

このように、すべての PSD の値をそのままコードに移せばデザイン再現できるようにすることで、実装時間の短縮につながります。