レスポンシブル対応している padding のコードを１行に書き直したい

Question

お世話になります。

<style lang="scss" scoped>
@import 'assets/css/mixins';

<中略>

padding: var(--padding__container);
@include screen-pc {
   padding: var(--padding__clampContainer);
}
</style>

上記のように、中略以下で padding に関するコードを4行書いております。
スマホ版とPC版で padding を変えるためにこのようにしているのですが、
この padding に関するコードを1行にまとめるには、どのようにすれば良いのでしょうか？

関連ファイル

assets/css/mixins

@mixin screen-sp {
  @media screen and (max-width: 64rem) {
    @content;
  }
}

@mixin screen-pc {
  @media screen and (min-width: 64rem) {
    @content;
  }
}

index.scss

:root {
  --padding__container: 0vh 5vw 0vh;
  --padding__clampContainer: 0vh clamp(5vw, calc((100vw - 1200px) / 2), 50vw) 0vh;
}

Comments

[Lhankor_Mhy]

メディアクエリも含めて1行で書くってことですよね？　改行を消す、とかそういう話ではないですよね？　別ファイルに書き出して @use とかそういう話でもないですよね？

それでしたら、無理じゃないかと思います。

Answer 1

ルートで1rem＝何pxとしているか分かりませんが、仮に1rem=10pxとするならば640pxがブレイクポイントとなりますので、メディアクエリを使わずとも以下記述のみでよいのではないでしょうか。
1333px以下は、左右のpaddingにclampの最小値5vwが適用されます。

padding: 0vh clamp(5vw, calc((100vw - 1200px) / 2), 50vw) 0vh;