SASS参考（SASS Reference）

优质

小牛编辑

130浏览

2023-12-01

描述 (Description)

您可以使用SASS参考更改组件的样式。

下表列出了项目设置文件中的SASS变量，该文件使该组件的默认样式得到自定义。

Sr.No.	名称和描述	类型	默认值
1	$orbit-bullet-background 它代表轨道子弹的默认颜色。	Color	$medium-gray
2	$orbit-bullet-background-active 它代表轨道子弹的默认活动颜色。	Color	$dark-gray
3	$orbit-bullet-diameter 它代表轨道子弹的默认直径。	Number	1.2rem
4	$orbit-bullet-margin 它代表轨道子弹之间的默认边距。	Number	0.1rem
5	$orbit-bullet-margin-top 它表示轨道子弹的滑动区域的默认距离。	Number	0.8rem
6	$orbit-bullet-margin-bottom 它表示从项目符号到其下方内容的默认底部边距。	Number	0.8rem
7	$orbit-caption-background 它代表轨道标题的默认背景颜色。	Color	rgba($black, 0.5)
8	$orbit-caption-padding 它代表轨道标题的默认填充。	Number	1rem
9	$orbit-control-background-hover 它表示悬停时控件的默认背景颜色。	Color	rgba($black, 0.5)
10	$orbit-control-padding 它代表轨道控制的默认填充。	Number	1rem
11	$orbit-control-zindex 它代表轨道控制的默认z-index。	Number	10

要构建此组件的最终CSS输出，可以使用以下mixins。要使用Foundation组件构建自己的类结构，可以自己使用mixins。

@include orbit-wrapper;

它为轨道包装器添加了样式。

@include orbit-container;

它为内部轨道幻灯片容器添加了样式。它用于类.orbit-container 。

@include orbit-slide;

它为滑块的单独幻灯片添加样式。它用于类.orbit-slide 。

@include orbit-caption;

它为幻灯片标题添加了样式。

@include orbit-control;

它为下一个和上一个按钮添加了基本样式。样式在默认CSS中的.orbit-next和.orbit-previous类之间划分。

@include orbit-previous;

它为前一个按钮添加了样式。这些用于.orbit-previous类。

@include orbit-next;

它为下一个按钮添加了样式。这些用于.orbit-next类。

@include orbit-bullets;

它将样式添加到轨道子弹容器中，并为前一个按钮添加样式，并在.orbit-bullets类上使用。