模拟 env() 以便立即使用 | CSS-Tricks

CSS 中已经存在一个 env() 函数，但它有点突然地出现，是 Apple 用于处理 “刘海” 的东西，但它已经成为草案规范。目标是让 UA 或作者声明无法更改的变量。某种程度上来说，CSS 的全局 const。

该规范似乎还没有提出我们实际上如何设置这些 env() 值。如果您现在需要它们，最简单的模拟方法是使用普通的 CSS 自定义属性，并且不改变它们。

但是，如果您想要使用 env() 语法，有一个 PostCSS 插件用于模拟它。该插件处理它们的方式是通过一个声明它们的 JavaScript 文件。

postcssCustomProperties({
  importFrom: 'path/to/file.js' /* module.exports = {
    environmentVariables: {
      '--branding-padding': '20px',
      '--branding-small': '600px'
    }
  } */
});

让它们从 JavaScript 开始很有趣，因为它意味着我们可能可以有一个地方来设置对 JavaScript 和 CSS 都可访问的变量。

Harry Nicholls 在他的文章 “为什么您应该使用 CSS env()” 中更详细地介绍了这一点，例如在处理单位时的一些注意事项。但是，如果您确实需要在 CSS 和 JavaScript 中使用一个来源来存放不可更改的变量，那么我认为这是一个不错的选择——并且在 env() 正式获得支持后，您可以将其移除。

评论