SASS参考（SASS Reference）
描述 (Description)
您可以使用SASS参考更改组件的样式。
变量 (Variables)
下表列出了项目设置文件中的SASS变量，该文件使该组件的默认样式得到自定义。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $button-padding 在按钮内填充。 | List | 0.85em 1em |
| 2 | $button-margin 按钮边缘。 | List | 0 0 $全球保证金0 |
| 3 | $button-fill 默认情况下填写按钮。 它可以是solid也可以是hollow 。 | Keyword | solid |
| 4 | $button-background 按钮的默认背景颜色。 | Color | $primary-color |
| 5 | $button-background-hover 在按钮的盘旋的背景颜色 | Color | 比例颜色（$ button-background，$ lightness:-15％） |
| 6 | $button-color 按钮的字体颜色。 | List | #fff |
| 7 | $button-color-alt 如果背景很亮，按钮的字体颜色。 | List | #000 |
| 8 | $button-radius 表示按钮的边框半径，默认为global-radius。 | Number | $global-radius |
| 9 | $button-sizes 按钮大小。 | Map | 微小:0.6remsmall:0.75remdefault:0.9remlarge:1.25rem |
| 10 | $button-opacity-disabled 按钮的不透明度，已禁用。 | List | 0.25 |
Mixins
要构建此组件的最终CSS输出，可以使用以下mixins。 要使用Foundation组件构建自己的类结构，可以自己使用mixins。
button-expand
@include button-expand($expand);
它用于将按钮扩展到其全宽。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $expand 设置为true以启用展开或否则。 | Boolean | true |
button-style
@include button-style($background, $background-hover, $color);
它设置了按钮的视觉风格。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $background 按钮的背景颜色。 | Color | $button-background |
| 2 | $background-hover 在悬停背景颜色的按钮。 设置为auto将自动生成悬停颜色。 | Color | $button-background-hover |
| 3 | $color 按钮上的文字颜色。 设置为auto将根据背景颜色自动生成颜色。 | Color | $button-color |
button-hollow
@include button-hollow;
它在悬停背景填充和空心按钮焦点上移除。
button-disabled
@include button-disabled;
通过淡化元素，重置光标和禁用指针事件，它会向按钮添加禁用的样式。
button-dropdown
@include button-dropdown($size, $color, $offset);
它为按钮添加了一个下拉箭头。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $size 它代表箭头的大小。 建议使用em值，以便在不同按钮尺寸内使用时三角形可以缩放。 | Number | 0.4em |
| 2 | $color 箭头的颜色。 | Color | white |
| 3 | $offset 表示按钮的文本和箭头之间的距离。 | Number | $button-padding |
button
@include button($expand, $background, $background-hover, $color, $style);
它为按钮添加了每种风格。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $expand 要使按钮全宽设置为true 。 | Boolean | false |
| 2 | $background 按钮的背景颜色。 | Color | $button-background |
| 3 | $background-hover 悬停时，设置背景颜色。 设置为auto以使mixin自动生成悬停颜色。 | Color | $button-background-hover |
| 4 | $color 表示按钮的文本颜色。 设置为auto以根据背景颜色自动生成颜色。 | Color | $button-color |
| 5 | $style 要创建空心按钮，请将其设置为hollow 。 $background颜色用作按钮主色。 | Keyword | solid |