Ionic 中 Angular 属性 和自定义 CSS 属性之间的区别

Question

能否举例说明 CSS 自定义属性

的用法

--ion-grid-padding
--ion-grid-padding-lg

与Angular.

具体来说，我没有看出 size-sm 和 --ion-grid-padding-lg 之间的细微差别？

我不明白我应该在哪里以及在什么文件中使用自定义 CSS 属性（还有，如何正确使用它们）。

Answer 1

您可以在文件 variable.css 中定义自定义 css 属性，例如：

--my-custom-opacity: 0.8;

在与您的页面关联的 css 文件中，或在 global.css 中，您可以使用以下方式访问此 属性：

.my-css-class {
   opacity: var(--my-custom-opacity);
}

您的 html 元素将被赋予 0.8 的不透明度。

如果您需要更新此 属性 以在单个页面上进行更改（并在其他地方保持不变），您可以使用主机标记进行更新：

:host {
   --my-custom-opacity: 0.6;
}

在这种情况下，您的元素将仅在该页面上被赋予 0.6 的不透明度。

这是在代码中的多个位置应用 css 值并在必要时更新的简单方法。

希望对您有所帮助！