Faking Env（）现在使用它

CSS 的 env() 函数并非凭空出现，最初由 Apple 用于处理“刘海屏”，现已成为草案规范。其目标是允许用户代理或作者声明不可更改的变量，类似于 CSS 中的全局常量。

然而，该规范尚未明确说明如何设置 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() 正式获得支持后将其移除。

以上是Faking Env（）现在使用它的详细内容。更多信息请关注PHP中文网其他相关文章！