📅 最后修改于: 2020-10-25 05:50:43 🧑 作者: Mango
在本章中，我们将研究全局样式。 Foundation框架的全局CSS包括有用的重置，以确保样式在各个浏览器中保持一致。
默认情况下，浏览器样式表的字体大小设置为100％。默认字体大小设置为16像素。根据字体大小，将计算网格大小。若要具有不同的基本字体大小和不受影响的网格断点，请将$ rem-base设置为$ global-font-size值，该值必须以像素为单位。
诸如链接和按钮之类的交互元素使用默认的蓝色阴影，该阴影来自SASS变量$ primary-color 。组件也可以具有颜色，例如：次要，警报，成功和警告。欲了解更多信息，请点击这里。
下表列出了SASS变量，这些变量用于自定义项目_settings.scss中组件的默认样式。
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 | $global-width
It represents the site’s global width. Used to determine the grid’s row width. |
Number | rem-calc(1200) |
| 2 | $global-font-size
It represents the font size applied to and . It is set 100% by default and the user’s browser settings value will be inherited. |
Number | 100% |
| 3 | $global-lineheight
It represents all types of default line height. $global-lineheight is 24px while $global-font-size set to 16px. |
Number | 1.5 |
| 4 | $primary-color
It gives color to the interactive components such as links and buttons. |
Color | #2199e8 |
| 5 | $secondary-color
It is used with components, which support .secondary class. |
Color | #777 |
| 6 | $success-color
It represents the positive status or action when used with .success class. |
Color | #3adb76 |
| 7 | $warning-color
It represents a caution status or action when used with .warning class. |
Color | #ffae00 |
| 8 | $alert-color
It represents a negative status or action when used with .alert class. |
Color | #ec5840 |
| 9 | $light-gray
It is used for light gray UI items. |
Color | #e6e6e6 |
| 10 | $medium-gray
It is used for medium gray UI items. |
Color | #cacaca |
| 11 | $dark-gray
It is used for dark gray UI items. |
Color | #8a8a8a |
| 12 | $black
It is used for black UI items. |
Color | #0a0a0a |
| 13 | $white
It is used for white UI items. |
Color | #fefefe |
| 14 | $body-background
It represents the background color of the body. |
Color | $white |
| 15 | $body-font-color
It represents the text color of the body. |
Color | $black |
| 16 | $body-font-family
It represents the list of fonts of the body. |
List | ‘Helvetica Neue’, Helvetica, Roboto, Arial, sans-serif |
| 17 | $body-antialiased
Antialiased type is enabled by setting this attribute to true using the CSS properties -webkit-font-smoothing and -moz-osx-font-smoothing. |
Boolean | true |
| 18 | $global-margin
It represents the global margin value on components. |
Number | 1rem |
| 19 | $global-padding
It represents global padding value on components. |
Number | 1rem |
| 20 | $global-margin
It represents global margin value used between components. |
Number | 1rem |
| 21 | $global-weight-normal
It represents global font weight for normal type. |
Keyword or Number | normal |
| 22 | $global-weight-bold
It represents global font weight for bold type. |
Keyword or Number | bold |
| 23 | $global-radius
It represents the global value of all elements which has a border radius. |
Number | 0 |
| 24 | $global-text-direction
It sets the text direction of the CSS to ltr or rtl |
ltr |