框架CSS变量（CSS Variables）
最后更新: | 浏览次数: 281|前端开发
概述
系统前端核心框架中预置的CSS变量，科学的使用有助于极大提高页面开发效率.减少CSS代码冗余
全局变量
| 变量名称 | 默认值 | 说明 |
|---|---|---|
| --body-color | #333 | 默认字体颜色 |
| --body-bg | fff | 默认背景颜色 |
| --body-font-size | 15px | 默认字体大小 |
| --body-font-weight | 400 | 字体粗细 |
| --body-line-height | 1.6 | 默认字体行距 |
| --link-color | #444 | 超链接颜色 |
| --link-hover-color | #0a58ca | 超链接激活时颜色 |
| --input-checked-color | #0d6efd | chcekcbox,radio选中时颜色 |
| --menu-level-ident | 16px | 菜单每层缩进值 |
容器变量
| 变量名称 | 默认值 | 说明 |
|---|---|---|
| --max-width | 1920px | 页面最大显示宽度 |
| --container-width | 1450px | container容器宽度 |
| --gutter-x | 1.5rem | container中列的水平间距 |
| --gutter-y | 0 | container中列的垂直间距 |
说明：
1. --max-width定义了在屏幕超过1920分辨率上的最大显示宽度，.container-fluid同样遵循此规则
2.--container-width定义.container-xl类的最大显示宽度，且.container-xl去除了断点的设置。
其它变量
| 变量名称 | 默认值 | 说明 |
|---|---|---|
| --overlay-color | transparent | banner图遮罩颜色 |
| --border-radius | 0 | 用于button,select上的圆角 |
| --offcanvas-bg | #fff | offcanvas组件背景颜色 |
| --param-width | 150px | 产品参数名称宽度 |
| --param-padding-y | 8px | 产品参数垂直间距 |
| --param-padding-x | 8px | 产品参数水平间距 |
Swiper变量
| 变量名称 | 默认值 | 说明 |
|---|---|---|
| --swiper-navigation-sides-offset | swiper的left,right | |
| --swiper-button-prev-content | swiper左字体图标 | |
| --swiper-button-next-content | swiper右字体图标 | |
| --swiper-navigation-color | swiper字体图标颜色 | |
| --swiper-navigation-size | swiper字体图标大小 | |
| --swiper-pagination-bullet-inactive-color | swiper标识背景颜色 | |
| --swiper-theme-color | 当前swiper标识背景颜色 | |
| --swiper-pagination-bullet-horizontal-gap | swiper标识图标距离 | |
| --swiper-pagination-bullet-opacity | swiper标识图标透明度 | |
| --swiper-pagination-bullet-width | swiper标识图标宽度 | |
| --swiper-pagination-bullet-height | swiper标识图标宽度 | |
| --swiper-pagination-bullet-border-radius | swiper标识图标弧度 |