Foundation - 全局样式
在本章中，我们将学习全局样式。Foundation 框架的全局 CSS 包含有用的重置，可确保样式在各个浏览器中保持一致。
字体大小
浏览器样式表的字体大小默认设置为 100%。默认字体大小设置为 16 像素。根据字体大小计算网格大小。要获得不同的基本字体大小和不受影响的网格断点，请将 $rem-base 设置为 $global-font-size 值，该值必须以像素为单位。
颜色
诸如链接和按钮之类的交互式元素使用来自 SASS 变量 $primary-color 的默认蓝色阴影。组件还可以具有颜色，例如:secondary、alert、success 和 warning。有关更多信息，请查看此处。
SASS 参考
变量
下表列出了 SASS 变量，这些变量用于自定义项目 _settings.scss 中组件的默认样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$global-width 表示站点的全局宽度。用于确定网格的行宽。 |
数字 | rem-calc(1200) |
| 2 |
$global-font-size 表示应用于 <html> 和 <body> 的字体大小。默认设置为100%，用户的浏览器设置值会被继承。 |
Number | 100% |
| 3 |
$global-lineheight 代表所有类型的默认行高。 $global-lineheight 为 24px，而 $global-font-size 设置为 16px。 |
Number | 1.5 |
| 4 |
$primary-color 它为链接和按钮等交互组件提供颜色。 |
Color | #2199e8 |
| 5 |
$secondary-color 它与支持.secondary 类。 |
颜色 | #777 |
| 6 |
$success-color 与 .success 类一起使用时，表示积极状态或操作。 |
颜色 | #3adb76 |
| 7 |
$warning-color 与 .warning 类一起使用时，表示警告状态或操作。 |
颜色 | #ffae00 |
| 8 |
$alert-color 与 .alert 类一起使用时，表示负面状态或操作。 |
颜色 | #ec5840 |
| 9 |
$light-gray 用于浅灰色 UI 项目。 |
颜色 | #e6e6e6 |
| 10 |
$medium-gray 用于中灰色的 UI 项目。 |
颜色 | #cacaca |
| 11 |
$dark-gray 用于深灰色的 UI 项目。 |
颜色 | #8a8a8a |
| 12 |
$black 用于黑色UI项目。 |
颜色 | #0a0a0a |
| 13 |
$white 用于白色UI项目。 |
颜色 | #fefefe |
| 14 |
$body-background 表示主体的背景颜色。 |
颜色 | $white |
| 15 |
$body-font-color 它表示正文的文本颜色。 |
颜色 | $black |
| 16 |
$body-font-family 它表示正文的字体列表。 |
列表 | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 |
$body-antialiased 通过使用 CSS 属性 -webkit-font-smoothing 和 -moz-osx-font-smoothing 将此属性设置为 true，可启用抗锯齿类型。 |
Boolean | true |
| 18 |
$global-margin 它表示组件上的全局边距值。 |
数字 | 1rem |
| 19 |
$global-padding 表示组件上的全局padding值。 |
Number | 1rem |
| 20 |
$global-margin 表示组件之间使用的全局margin值。 |
Number | 1rem |
| 21 |
$global-weight-normal 它表示普通类型的全局字体粗细。 |
关键字或数字 | normal |
| 22 |
$global-weight-bold 它表示粗体类型的全局字体粗细。 |
关键字或数字 | bold |
| 23 |
$global-radius 它表示所有具有边框半径的元素的全局值。 |
数字 | 0 |
| 24 |
$global-text-direction 它将 CSS 的文本方向设置为 ltr 或 rtl |
ltr |
