使用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中文网其他相关文章！