使用 PostCSS 函数来自动化你的响应式工作流

不久前，您可能偶然发现了 这篇 CSS-Tricks 文章，其中我描述了如何使用 mixin 通过 RFS 自动化响应式字体大小。在最新的 v9 版本中，RFS 能够重新调整任何具有 px 或 rem 单位的 CSS 属性的任何值，例如 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;
  }
}

演示

这是一个展示工作原理的 Pen。您可以调整演示大小以查看流体重新缩放的效果。

查看 Pen
RFS card- PostCSS by Martijn Cuppens (@MartijnCuppens)
on CodePen.

深入了解 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);
}

---

希望您能在工作中发现这些更新很有用。如果您有任何问题或反馈，请留下评论！