[TOC] 离子组件使用[CSS变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)构建，可轻松自定义应用程序。CSS变量允许将值存储在一个位置，然后在多个其他位置引用。它们还可以在运行时动态更改CSS（以前需要CSS预处理器）。CSS变量比以往更容易覆盖Ionic组件以匹配品牌或主题。 ## 设置值 ### 全局变量 可以在`:root`选择器中的应用程序中全局设置CSS变量。它们也可以仅应用于特定模式。有关Ionic提供的全局变量的更多信息，请参阅[Ionic变量](https://ionicframework.com/docs/theming/css-variables#ionic-variables)。 ~~~ /* 为所有模式设置变量 */ :root { /* 设置整个应用程序的背景 */ --ion-background-color: #ff3700; /* 设置整个应用程序的字体系列 */ --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif; } } /* 仅为iOS设置整个应用程序的文本颜色 */ .ios { --ion-text-color: #000; } } /* 仅为Material Design设置整个应用程序的文本颜色 */ .md { --ion-text-color: #222; } } ~~~ ### 组件变量 要为特定组件设置CSS变量，请在其选择器内添加变量。有关[Ionic](https://ionicframework.com/docs/theming/css-variables#ionic-variables)提供的组件级变量的更多信息，请参阅[Ionic Variables](https://ionicframework.com/docs/theming/css-variables#ionic-variables)。 ~~~ /* 在所有离子按钮元素上设置颜色 */ ion-button { --color: #222; } } /* 使用.fancy-button类在离子按钮上设置背景 */ .fancy-button { --background: #00ff00; } } ~~~ ### 通过JavaScript设置的变量 也可以使用[setProperty（）](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)通过JavaScript更改CSS变量： ~~~ const el = document.querySelector('.fancy-button'); el.style.setProperty( el.style.setProperty('--background', '#36454f'); ~~~ ## 获得价值观 ### 使用CSS 如果需要，[var（）CSS函数](https://developer.mozilla.org/en-US/docs/Web/CSS/var)可用于获取CSS变量的值以及任意数量的回退值。在下面的示例中，`--background`属性将设置为`--charcoal`变量的值（如果已定义），否则将使用`#36454f`。 ~~~ .fancy-button { --background: var(--charcoal, #36454f); } } ~~~ ### 使用JavaScript 可以使用[getPropertyValue（）](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)在JavaScript中读取CSS变量的值： ~~~ const el = document.querySelector('.fancy-button'); const color = el.style.getPropertyValue('--charcoal'); ~~~ ## 离子变量 ### 组件变量 Ionic提供组件级别存在的变量，例如`--background`和`--color`。有关组件接受的自定义属性的列表，请查看其`Custom Properties`部分[API参考](https://ionicframework.com/docs/api/)。例如，请参阅[按钮自定义属性](https://ionicframework.com/docs/api/button#css-custom-properties)。 ### 全局变量 Ionic提供了几个全局变量，以便简化整个应用程序。有关更多信息，包括所有全局变量的列表，请参阅[先进的主题](https://ionicframework.com/docs/theming/advanced)。