Foundation - Flex Video SASS 参考
描述
您可以使用 SASS 参考更改组件的样式。
变量
下表列出了项目设置文件中的 SASS 变量，这些变量可自定义组件的默认样式。
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$flexvideo-padding-top 表示 flex 视频容器上方的填充。 |
数字 | rem-calc(25) |
| 2 |
$flexvideo-margin-bottom 表示 flex 视频容器下方的边距。 |
数字 | rem-calc(16) |
| 3 |
$flexvideo-ratio 它表示用于创建 4:3 宽高比的填充。 |
数字 | 4 x 3 |
| 4 |
$flexvideo-ratio-widescreen 它表示用于创建 16:9 宽高比的填充。 |
数字 | 16 x 9 |
Mixins
要构建此组件的最终 CSS 输出，可以使用以下 mixin。要使用 Foundation 组件构建自己的类结构，您可以自己使用 mixin。
flex-video
@include flex-video($ratio);
它用于创建一个 flex 视频容器。它接受 $ratio 参数，如下所述。
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$ratio 它表示容器的比例，格式为 x x y。 |
列表 | $flexvideo-ratio |
函数
flex-video
flex-video($ratio)
它创建一个百分比高度，用作 flex 视频容器中的填充。它接受参数$ratio，其类型为List。参数$ratio表示容器的比例，格式为x x y。
foundation_media.html
