SASS参考（SASS Reference）
优质
小牛编辑
131浏览
2023-12-01
描述 (Description)
您可以使用SASS参考更改组件的样式。
变量 (Variables)
下表列出了项目设置文件中的SASS变量，该变量使得此组件的默认样式可以自定义。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $slider-height 它表示滑块的默认高度。 | Number | 0.5rem |
| 2 | $slider-width-vertical 它表示滑块的垂直滑块的默认宽度。 | Number | $slider-height |
| 3 | $slider-background 它表示滑块的轨道默认背景颜色。 | Color | $light-gray |
| 4 | $slider-fill-background 它表示滑块的活动填充颜色的默认颜色。 | Color | $medium-gray |
| 5 | $slider-handle-height 它表示滑块手柄的默认高度。 | Number | 1.4rem |
| 6 | $slider-handle-width 它表示滑块手柄的默认宽度。 | Number | 1.4rem |
| 7 | $slider-handle-background 它表示滑块手柄的默认颜色。 | Color | $primary-color |
| 8 | $slider-opacity-disabled 它表示禁用滑块的默认渐变量。 | Number | 0.25 |
| 9 | $slider-radius 它表示滑块的默认半径。 | Number | $global-radius |
| 10 | $slider-transition 它表示要设置为滑块手柄和填充的过渡属性。 | Transition | all 0.2s ease-in-out |
Mixins
要构建此组件的最终CSS输出，可以使用以下mixins。 要使用Foundation组件构建自己的类结构，可以自己使用mixins。
slider-container
@include slider-container;
它添加了一般滑块样式。
slider-fill
@include slider-fill;
它为滑块的活动填充添加了一般样式。
slider-handle
@include slider-handle;
它为滑块手柄添加了一般样式。