SASS参考（SASS Reference）
优质
小牛编辑
136浏览
2023-12-01
描述 (Description)
您可以使用SASS参考更改组件的样式。
变量 (Variables)
下表列出了项目设置文件中的SASS变量，该变量使组件的默认样式得以自定义。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $buttongroup-margin 它表示按钮组的边距。 | Number | 1rem |
| 2 | $buttongroup-spacing 它表示按钮组中每个按钮之间的边距。 | Border | 1px |
| 3 | $buttongroup-child-selector 它表示按钮组中按钮的选择器。 | String | '.button' |
| 4 | $buttongroup-expand-max 它代表最大按钮，可以是偶数宽度的按钮组。 | Number | 6 |
Mixins
要构建此组件的最终CSS输出，可以使用以下mixins。 要使用Foundation组件构建自己的类结构，可以自己使用mixins。
button-group
@include button-group($child-selector);
它为按钮组的容器添加样式。 下表列出了用于此目的的参数。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $child-selector 它表示按钮组中按钮的选择器。 | String | $buttongroup-child-selector |
button-group-expand
@include button-group-expand($count, $selector);
创建一个全宽按钮组，使每个按钮具有相等的宽度。 它使用参数，如下表所示。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $count 表示按钮组中的按钮数。 将其设置为auto ，将生成考虑许多按钮的CSS。 | Keyword or Number | auto |
| 2 | $selector 表示按钮组中按钮的选择器。 | String | $buttongroup-child-selector |
button-group-stack
@include button-group-stack($selector);
它将按钮堆叠在一个组中。 下表列出了用于此目的的参数。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $selector 表示按钮组中按钮的选择器。 | String | $buttongroup-child-selector |
button-group-unstack
@include button-group-unstack($selector);
它取消堆叠组中的按钮。 下表列出了用于此目的的参数。
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $selector 表示按钮组中按钮的选择器。 | String | $buttongroup-child-selector |