使用聚合物 css 变量答案

【问题标题】：Using polymer css variables使用聚合物 css 变量
【发布时间】：2017-02-21 16:50:25
【问题描述】：

我无法理解如何将自定义 css 变量与聚合物一起使用。目前我正在使用“iron-overlay-behaviour”进行叠加。

这包括定义了各种 css 变量的“iron-overlay-backdrop”元素。我感兴趣的主要是--iron-overlay-backdrop-opacity。

我可以通过添加使这些在我的主 index.html 文件中工作

  <style is="custom-style">
    :root {
      --iron-overlay-backdrop-opacity: 0.4;
    }
 </style>

但我不想在那里定义样式！我想在我的自定义叠加元素中定义它们。

如何在我的自定义元素中使用这些？

我试过这样使用它们

<dom-module id="faq-overlay">

<style>

:host {
  --iron-overlay-backdrop-opacity: 0.3;
  --iron-overlay-backdrop-background-color: red;
}
...

但这不起作用。有没有办法做到这一点？

【问题讨论】：

标签： polymer

【解决方案1】：

我相信您正在寻找的是：（在您的主题文件中）

<style is="custom-style">
  :root {
    --iron-overlay-backdrop-opacity: 0.7;
    --background-r: 0;
    --background-g: 0;
    --background-b: 255;
    --background-color: blue;
    --iron-overlay-backdrop-background-color: rgba(var(--background-r),var(--background-g),var(--background-b),var(--iron-overlay-backdrop-opacity));
  }
 </style>

在您的自定义元素中

<style is="custom-style">
    :host paper-material.custom {
       background-color: var(--iron-overlay-backdrop-background-color);
    }
</style>

【讨论】：

感谢主题文件的提示...我通过创建“faq-style.html”文件以我想要的方式完成了这项工作...使用

【解决方案2】：

由于 Safari 中的一个错误（如 Polymer 所述），Polymer 使用了 css 变量的自定义实现。

请看这里：https://www.polymer-project.org/1.0/docs/devguide/settings（在页面底部）。

要使用浏览器实现，告诉 Polymer：

<script>
  window.Polymer = {
     useNativeCSSProperties: true
  };
</script>

【讨论】：