基础 - 全球风格
在本章中，我们将学习全局样式。Foundation 框架的全局 CSS 包括有用的重置，可确保样式在浏览器之间保持一致。
字体大小
浏览器样式表的字体大小默认设置为 100%。默认字体大小设置为 16 像素。根据字体大小，计算网格大小。要具有不同的基本字体大小和不受影响的网格断点，请将$rem-base设置为$global-font-size值，该值必须以像素为单位。
颜色
链接和按钮等交互元素使用来自 SASS 变量$primary-color的默认蓝色阴影。组件还可以具有颜色，例如：secondary、alert、success 和 warning。欲了解更多信息，请查看此处。
SASS 参考
变量
下表列出了 SASS 变量，这些变量用于自定义项目_settings.scss中组件的默认样式。
| 先生。 | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$全局宽度 它代表网站的全球宽度。用于确定网格的行宽。 |
数字 | 雷姆计算(1200) |
| 2 |
$全局字体大小 它表示应用于<html>和<body>的字体大小。默认设置为 100%，并且将继承用户的浏览器设置值。 |
数字 | 100% |
| 3 |
$全局行高 它代表所有类型的默认行高。$global-lineheight为 24px，而$global-font-size设置为 16px。 |
数字 | 1.5 |
| 4 |
$primary-color 它为交互组件（例如链接和按钮）提供颜色。 |
颜色 | #2199e8 |
| 5 |
$次要颜色 它与支持.secondary类的组件一起使用。 |
颜色 | 第777章 |
| 6 |
$成功颜色 与.success类一起使用时，它表示积极的状态或操作。 |
颜色 | #3adb76 |
| 7 |
$警告颜色 与.warning类一起使用时，它表示警告状态或操作。 |
颜色 | #ffae00 |
| 8 |
$警报颜色 与.alert类一起使用时，它表示负面状态或操作。 |
颜色 | #ec5840 |
| 9 |
$浅灰色 它用于浅灰色 UI 项目。 |
颜色 | #e6e6e6 |
| 10 |
$中灰色 它用于中灰色 UI 项目。 |
颜色 | #卡卡卡 |
| 11 |
$深灰色 它用于深灰色 UI 项目。 |
颜色 | #8a8a8a |
| 12 |
$黑色 它用于黑色 UI 项目。 |
颜色 | #0a0a0a |
| 13 |
$白色 它用于白色 UI 项目。 |
颜色 | #fefefe |
| 14 |
$body-背景 它代表主体的背景颜色。 |
颜色 | $白色 |
| 15 |
$body-字体颜色 它代表正文的文本颜色。 |
颜色 | $黑色 |
| 16 |
$body-font-family 它代表正文的字体列表。 |
列表 | “Helvetica Neue”、Helvetica、Roboto、Arial、无衬线字体 |
| 17 号 |
$body-抗锯齿 通过使用 CSS 属性-webkit-font-smoothing和-moz-osx-font-smoothing将此属性设置为true来启用抗锯齿类型。 |
布尔值 | 真的 |
| 18 |
$全球利润 它代表组件的全局保证金值。 |
数字 | 1雷姆 |
| 19 |
$全局填充 它表示组件上的全局填充值。 |
数字 | 1雷姆 |
| 20 |
$全球利润 它代表组件之间使用的全局保证金值。 |
数字 | 1雷姆 |
| 21 |
$全局权重正常 它代表普通类型的全局字体粗细。 |
关键字或号码 | 普通的 |
| 22 |
$global-权重-粗体 它代表粗体的全局字体粗细。 |
关键字或号码 | 大胆的 |
| 23 |
$全局半径 它表示具有边界半径的所有元素的全局值。 |
数字 | 0 |
| 24 |
$全局文本方向 它将 CSS 的文本方向设置为ltr或rtl |
左转 |