Sass参考(Sass Reference)
优质
小牛编辑
135浏览
2023-12-01
变量 (Variables)
您可以使用表中列出的以下SASS变量来更改组件的样式。
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $menu-margin 在菜单中设置边距。 | Number | 0 |
2 | $menu-margin-nested 在嵌套菜单中设置左侧边距。 | Number | 1rem |
3 | $menu-item-padding 0.7rem 1rem | Number | 在菜单中设置填充。 |
4 | $menu-icon-spacing 设置菜单项中文本和图标之间的空间。 | Number | 0.25rem |
5 | $menu-expand-max 包括CSS中最大数量的expand-n类。 | Number | 6 |
Mixins
您可以使用mixins为表中列出的组件构建CSS类结构。
menu-base
为菜单创建基本样式。
@include menu-base;
menu-expand
以相同的宽度展开菜单项。
@include menu-expand($count);
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $count 菜单中的项目数。 | Keyword or Number | auto |
menu-direction
菜单方向已设定。
@include menu-direction($dir);
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $dir 水平或垂直设置菜单方向。 | Keyword | horizontal |
menu-simple
创建简单菜单时没有填充或悬停状态。
@include menu-simple;
menu-nested
嵌套菜单包含样式。 在菜单中包含margin-left 。
@include menu-nested($padding);
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $padding 设置边距长度。 | Keyword or Number | auto |
menu-icons
图标包含在菜单项中。
@include menu-icons($position, $base);
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $position 设置图标的位置。 | Keyword | side |
2 | $base 要在同一元素上多次调用mixin,请将其设置为false。 | Boolean | true |