使用PostCSS函數來自動化您的響應式工作流程

之前，您可能看過這篇CSS-Tricks 文章，其中我描述瞭如何使用RFS mixin 自動化響應式字體大小。在最新版本v9 中，RFS 能夠重新調整任何CSS 屬性的任何值（具有px 或rem 單位），例如margin、padding、border-radius，甚至是box-shadow。

今天，我們將重點介紹其PostCSS 實現。首先，使用npm 安裝RFS：

 npm install rfs

下一步是將RFS 添加到PostCSS 插件列表中。如果您使用的是postcss.config.js 文件，則可以將其添加到其他PostCSS 插件（例如Autoprefixer）的列表中：

 module.exports = {
  plugins: [
    require('rfs'),
    require('autoprefixer'),
  ]
};

配置完成後，您就可以在自定義CSS 中的任何位置使用rfs()函數。例如，如果您想讓字體大小具有響應性：

 .title {
  font-size: rfs(4rem);
}

…或者將其與任何您想要的屬性一起使用：

 .card {
  background-color: #fff;
  border-radius: rfs(4rem);
  box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25));
  margin: rfs(2rem);
  max-width: 540px;
  padding: rfs(3rem);
}

上面的代碼將輸出以下CSS：

 .card {
  background-color: #fff;
  border-radius: calc(1.525rem 3.3vw);
  box-shadow: 0 0 calc(1.325rem 0.9vw) rgba(0, 0, 0, .25);
  margin: calc(1.325rem 0.9vw);
  max-width: 540px;
  padding: calc(1.425rem 2.1vw);
}

@media (min-width: 1200px) {
  .card {
    border-radius: 4rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .25);
    margin: 2rem;
    padding: 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 和自定義屬性

:root {
  --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 {
  max-width: 540px;
  padding: var(--card-padding);
  margin: var(--card-margin);
  background-color: #fff;
  box-shadow: var(--card-box-shadow);
  border-radius: var(--card-border-radius);
}

希望您能在工作中發現這些更新有用。如果您有任何問題或反饋，請留下評論！

以上是使用PostCSS函數來自動化您的響應式工作流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！