我正在寻找在Ionic 4中更改组件样式的最佳实践，例如字体大小。我已经阅读了许多来源，但不清楚最好的方法是什么。
据我了解，每个组件都有一个 SCSS 文件，可用于设置该组件的样式，并global.scss全局更改。
这里有什么特殊注意事项吗？例如，使用元素名称是否合适，还是应该首选类？
当不同平台的样式不同时呢？最好用这样的事情来完成吗？
ion-card-header {
.ios & {
}
.md & {
}
}
要全局更改，请将其添加到全局 SCSS？
还有如何正确使用 CSS 变量。
请寻找想法和最佳实践，以及 Ionic 4 结构的任何特殊考虑因素。
我正在自己回答这个问题，以收集我一直在看的信息。
实用程序属性-text-wrap、no-padding等
Ionic 4 包含许多实用程序属性，可用于修改可用的元素。示例包括text-wrap或padding-start。
这些可以应用于任何元素，以使用属性调整样式。对于仅适用于单个案例且不会从规则中受益的更改，这是首选方法。
这些实用程序包括：
- 文本修改 文本中心、文本
- 换行、文本大写等。
- 元素放置
- 浮子左，浮子端等
- 内容空间
- 填充开始(在开始时添加 16px 填充)、无填充、底部边距等。
- 弹性属性 对齐内容均匀，对齐
- 项目基线，无包装，对齐自我中心等。
对于文本修改和元素放置属性，它们具有响应式版本，例如text-lg-center或float-sm-end。
CSS 变量---color、--padding-start等
Ionic 4 是使用 CSS 变量构建的(更多关于 CSS 变量)，取代了 SCSS 变量并启用运行时更改。
全局 CSS 变量---ion-color-primary、--ion-color-primary-contrast等
- 颜色变量 --离子-颜色-原色，--
- 离子-颜色-原色-对比度等
- 应用程序变量 --离子
- 字体家族，--离子网格填充MD等
下面将更详细地描述这些内容。
全局颜色 CSS 变量
主题颜色应用于整个应用程序中使用的任何颜色。Ionic 4 提供 9 种开箱即用的主题颜色，可用于更改许多组件的颜色。示例包括：
<ion-button>Default</ion-button>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
修改颜色变量
更改颜色时，应设置所有适当的变量，例如...
:root {
--ion-color-secondary: #006600;
--ion-color-secondary-rgb: 0,102,0;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #005a00;
--ion-color-secondary-tint: #1a751a;
}
颜色生成器可用于生成这些基色。它不能用 SCSS 完成，因为它需要在运行时工作。正在研究支持这一点的解决方案。
添加颜色
可以添加在整个应用程序中使用的新颜色，作为修改默认颜色的替代方法。
修改背景颜色或文本颜色
修改背景颜色或文本颜色变量时，还需要更新大量阶梯颜色。一个例子是...
:root {
--ion-background-color: #ffffff;
--ion-background-color-rgb: 255, 255, 255;
--ion-text-color: #000000;
--ion-text-color-rgb: 0, 0, 0;
--ion-color-step-50: #f2f2f2;
--ion-color-step-100: #e6e6e6;
--ion-color-step-150: #d9d9d9;
--ion-color-step-200: #cccccc;
--ion-color-step-250: #bfbfbf;
--ion-color-step-300: #b3b3b3;
--ion-color-step-350: #a6a6a6;
--ion-color-step-400: #999999;
--ion-color-step-450: #8c8c8c;
--ion-color-step-500: #808080;
--ion-color-step-550: #737373;
--ion-color-step-600: #666666;
--ion-color-step-650: #595959;
--ion-color-step-700: #4d4d4d;
--ion-color-step-750: #404040;
--ion-color-step-800: #333333;
--ion-color-step-850: #262626;
--ion-color-step-900: #191919;
--ion-color-step-950: #0d0d0d;
}
这些可以很容易地生成。
全局应用程序 CSS 变量
有许多全局应用程序变量可用。这些应该在可能的地方使用。例子包括--ion-font-family、--ion-padding和--ion-margin。最后两个修改了上面讨论的实用程序属性用于填充和边距的值。
全局网格 CSS 变量
有许多全局网格变量可用。这些应该在可能的地方使用。示例包括--ion-grid-columns和--ion-grid-padding-xl。
组件 CSS 变量
组件接受的 CSS 变量可以在 API 参考中其条目的自定义属性部分找到。
例如，请参阅 离子按钮的自定义属性，例如--ripple-color或--color-activated。
设置 CSS 变量
要设置全局变量，请使用src/theme/variables.scss文件，并在:root选择器上设置它们，例如...
:root {
/* Set the font family of the entire app */
--ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
要设置组件变量，请使用组件选择器，例如...
/* Set the color on all ion-button elements */
ion-button {
--color: #222;
}
CSS 变量应该用于修改可用的组件。
获取 CSS 变量
要获取 CSS 变量，应使用 var() CSS 函数，该函数允许任意数量的回退值，例如...
.fancy-button {
--background: var(--charcoal, #36454f);
}
平台样式
应使用.ios和.md选择器更改特定于平台的样式，例如：
.ios ion-badge {
text-transform: uppercase;
}
全局变量应该在可用的情况下用于此目的，例如：
.ios {
--ion-background-color: #222;
}