CSS 变量

Ionic 组件使用 CSS 变量 构建，以便轻松定制应用程序。CSS 变量允许在一个地方存储一个值，然后在多个其他地方引用它。它们还使得在运行时动态更改 CSS 成为可能（以前需要 CSS 预处理器）。CSS 变量使覆盖 Ionic 组件以匹配品牌或主题变得比以往更容易。

设置值

全局变量

CSS 变量可以在应用程序中的 :root 选择器中全局设置。它们也可以仅针对特定模式应用。有关 Ionic 提供的全局变量的更多信息，请参见 Ionic 变量。

使用 Ionic CLI 启动 Angular、React 或 Vue 项目时，将创建 src/theme/variables.scss 文件，你可以在其中覆盖默认的 Ionic 变量。

/* Set variables for all modes */
:root {
  /* Set the background of the entire app */
  --ion-background-color: #ff3700;

  /* Set the font family of the entire app */
  --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
}

/* Set text color of the entire app for iOS only */
:root.ios {
  --ion-text-color: #000;
}

/* Set text color of the entire app for Material Design only */
:root.md {
  --ion-text-color: #222;
}

组件变量

要为特定组件设置 CSS 变量，请在它的选择器内添加该变量。有关 Ionic 提供的组件级变量的更多信息，请参见 Ionic 变量。

/* Set the color on all ion-button elements */
ion-button {
  --color: #222;
}

/* Set the background on an ion-button with the .fancy-button class */
.fancy-button {
  --background: #00ff00;
}

通过 JavaScript 设置的变量

CSS 变量也可以通过 JavaScript 使用 setProperty() 更改。

const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');

获取值

使用 CSS

可以使用 var() CSS 函数 获取 CSS 变量的值，以及任意数量的后备值（如果需要）。在下面的示例中，--background 属性将设置为 --charcoal 变量的值（如果已定义），如果没有定义则使用 #36454f。

.fancy-button {
  --background: var(--charcoal, #36454f);
}

使用 JavaScript

可以使用 getPropertyValue() 在 JavaScript 中读取 CSS 变量的值。

const el = document.querySelector('.fancy-button');
const color = el.style.getPropertyValue('--background');

Ionic 变量

组件变量

Ionic 提供了在组件级存在的变量，例如 --background 和 --color。要查看组件接受的自定义属性列表，请查看其 API 参考 中的“CSS 自定义属性”部分。例如，请参见 按钮 CSS 自定义属性。

全局变量

Ionic 提供了几个全局变量，以便于对整个应用程序进行主题化。有关更多信息，请参见 颜色、主题 和 高级主题。