Skip to main content

CSS 变量

Ionic 组件使用 CSS 变量 构建，以便轻松自定义应用。CSS 变量允许将一个值存储在一个位置，然后在多个其他位置引用。它们还可以在运行时动态更改 CSS（以前需要使用 CSS 预处理器）。CSS 变量使得覆盖 Ionic 组件以匹配品牌或主题比以往任何时候都容易。

设定值​

🌐 Setting Values

全局变量​

🌐 Global Variables

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

🌐 CSS variables can be set globally in an application in the :root selector. They can also be applied only for a specific mode. See Ionic Variables for more information on the global variables Ionic provides.

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

🌐 When using the Ionic CLI to start an Angular, React or Vue project, the src/theme/variables.scss file is created where you can override the default Ionic Variables.

/* 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;
}

组件变量​

🌐 Component Variables

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

🌐 To set a CSS variable for a specific component, add the variable inside of its selector. See Ionic Variables for more information on the component-level variables Ionic provides.

/* 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 设置变量​

🌐 Variables set via JavaScript

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

🌐 CSS variables can also be changed via JavaScript using setProperty():

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

获取值​

🌐 Getting Values

使用 CSS​

🌐 Using CSS

var() CSS 函数 可以用来获取 CSS 变量的值，同时可根据需要提供任意数量的备用值。在下列示例中，--background 属性将被设置为 --charcoal 变量的值（如果已定义），如果未定义，则使用 #36454f。

🌐 The var() CSS function can be used to get the value of a CSS variable, along with any number of fallback values, if desired. In the below example, the --background property will be set to the value of the --charcoal variable, if defined, and if not it will use #36454f.

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

使用 JavaScript​

🌐 Using JavaScript

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

🌐 The value of a CSS variable can be read in JavaScript using getPropertyValue():

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

Ionic 变量​

🌐 Ionic Variables

组件变量​

🌐 Component Variables

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

🌐 Ionic provides variables that exist at the component level, such as --background and --color. For a list of the custom properties a component accepts, view the CSS Custom Properties section of its API reference. For example, see the Button CSS Custom Properties.

全局变量​

🌐 Global Variables

Ionic 提供了几个全局变量，以便使整个应用的主题化更容易。欲了解更多信息，请参见 颜色、主题 和 高级主题。

🌐 There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see Colors, Themes and Advanced Theming.

目录