Sass参考（Sass Reference）
优质
小牛编辑
132浏览
2023-12-01
变量 (Variables)
您可以使用下表中列出的SASS变量来更改组件的样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $reveal-background 它显示模态的背景颜色。 | Color | $white |
| 2 | $reveal-width 它定义了模态的宽度。 | Number | 600px |
| 3 | $reveal-max-width 它指定模态的最大宽度。 | Number | $global-width |
| 4 | $reveal-offset 添加模态时，它将偏离窗口顶部。 | Number | rem-calc(100) |
| 5 | $reveal-padding 它定义了模态内的填充。 | Number | $global-padding |
| 6 | $reveal-border 它设置模态的边框。 | Number | 1px solid $ medium-grey |
| 7 | $reveal-radius 它指定模态的半径。 | Number | $global-radius |
| 8 | $reveal-zindex 叠加层使用z-index值作为模态。 | Number | 1005 |
| 9 | $reveal-overlay-background 它显示模态叠加的背景颜色。 | Color | rgba($black, 0.45) |
Mixins
您可以使用mixins为您的揭密模态组件构建CSS类结构。
reveal-overlay
您可以使用以下mixin包含模态叠加的样式 -
@include reveal-overlay($background);
它包含一个参数，如下表所示 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $background 它显示叠加的背景颜色。 | Color | $reveal-overlay-background |
reveal-modal-base
您可以使用以下mixin为模态添加基本样式 -
@include reveal-modal-base;
reveal-modal-width
它用于使用下面的mixin创建模态的宽度 -
@include reveal-modal-width($width, $max-width);
它包含表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $width 它指定模态的宽度。 | Number | None |
| 2 | $max-width 它指定模态的最大宽度。 | Number | $reveal-max-width |
reveal-modal-fullscreen
您可以使用以下mixin根据窗口的宽度和高度创建全屏模式 -
@include reveal-modal-fullscreen;