PostCSS関数を使用して、レスポンシブワークフローを自動化します

以前には、このCSS-Tricksの記事を読んだことがあるかもしれません。そこでは、RFS Mixinを使用して応答性のあるフォントサイズを自動化する方法を説明しました。 V9の最新バージョンでは、RFSは、マージン、パディング、ボーダーラジウス、さらにはBox-Shadowなど、CSS属性の任意の値（PXまたはREMユニットを使用）を変更することができます。

今日は、PostCSSの実装に焦点を当てます。まず、NPMを使用してRFSをインストールします。

 NPMインストールRFS

次のステップは、PostCSSプラグインリストにRFSを追加することです。 postcss.config.jsファイルを使用している場合は、Autoprefixerなどの他のPostCSSプラグインのリストに追加できます。

 module.exports = {
  プラグイン：[
    必要（ 'rfs'）、
    必要（ 'autoprefixer'）、
  ]
};

構成が完了したら、カスタムCSSのどこでもrfs()関数を使用できます。たとえば、フォントサイズを応答したい場合：

 。タイトル {
  font-size：rfs（4rem）;
}

…またはあなたが望む任意の属性でそれを使用します：

 .card {
  バックグラウンドカラー：#fff;
  Border-Radius：RFS（4rem）;
  Box-Shadow：RFS（0 0 2REM RGBA（0、0、0、.25））;
  マージン：RFS（2REM）;
  最大幅：540px;
  パディング：RFS（3REM）;
}

上記のコードは、次のCSSを出力します。

 .card {
  バックグラウンドカラー：#fff;
  Border-Radius：calc（1.525rem 3.3VW）;
  Box-Shadow：0 0 Calc（1.325Rem 0.9VW）RGBA（0、0、0、.25）;
  マージン：calc（1.325Rem 0.9VW）;
  最大幅：540px;
  パディング：Calc（1.425Rem 2.1VW）;
}

@media（min-width：1200px）{
  .card {
    ボーダーラジウス：4rem;
    Box-Shadow：0 0 2REM RGBA（0、0、0、.25）;
    マージン：2REM;
    パディング：3REM;
  }
}

デモ

これがそれがどのように機能するかを示す例を示します。デモのサイズを変更して、スムーズな再スケーリング効果を確認できます。

RFSがCSSを解析する方法の詳細をご覧ください

プラグインは、宣言された値でrfs()関数の発生を探し、 calc()関数を使用して機能を流体値に置き換えます。各ルールの後、RFSは、値が大きくなりすぎないようにする追加のCSSを含むメディアクエリを生成します。

RFSは、宣言でPXとREMの値のみを変換します。他のすべての値（EM値、数字、色など）は無視されます。この機能は、以下に示すように、宣言で複数回使用することもできます。

 Box-Shadow：0 RFS（2REM）RFS（1.5REM）RGBA（0、0、255、.6）;

RFSおよびカスタムプロパティ

：根 {
  -Title-Font-Size：RFS（2.125REM）;
  -card-padding：rfs（3rem）;
  -card-margin：rfs（2rem）;
  -card-border-radius：rfs（4rem）;
  -card-box-shadow：rfs（0 0 2REM RGBA（0、0、0、.25））;
}

これらの変数は、後でCSSで使用できます。

 .card {
  最大幅：540px;
  パディング：var（ - カードパッジング）;
  マージン：var（ - カードマージン）;
  バックグラウンドカラー：#fff;
  Box-Shadow：var（ -  card-box-shadow）;
  Border-Radius：var（ -  card-border-radius）;
}

うまくいけば、これらの更新は職場で役立つと思うでしょう。ご質問やフィードバックがある場合は、コメントを残してください！

以上がPostCSS関数を使用して、レスポンシブワークフローを自動化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。