| | |
| | | * @author Tevin |
| | | */ |
| | | |
| | | /* ---------- transition ---------- */ |
| | | @mixin transition($time:0.2s, $rate:ease-in-out) { |
| | | @if ($rate=="ease-in-out-2") { |
| | | $rate: cubic-bezier(0.645, 0.045, 0.355, 1); |
| | | } |
| | | -webkit-transition: all $time $rate; |
| | | -moz-transition: all $time $rate; |
| | | transition: all $time $rate; |
| | | } |
| | | |
| | | /* ---------- clearfix ---------- */ |
| | | /** |
| | | * clearfix - 清除浮动 |
| | | * 示例 |
| | | * @include clearfix; |
| | | */ |
| | | @mixin clearfix() { |
| | | &:after { |
| | | clear: both; |
| | |
| | | } |
| | | } |
| | | |
| | | /* ---------- ellipsis ---------- */ |
| | | /** |
| | | * ellipsis - 省略号 |
| | | * 示例 |
| | | * @include ellipsis; |
| | | * @include ellipsis(100%); |
| | | * 参数 |
| | | * $width 宽度 |
| | | */ |
| | | @mixin ellipsis($width:false) { |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | |
| | | } |
| | | } |
| | | |
| | | /* ---------- prefixer ---------- */ |
| | | @mixin prefixer ($property, $value...) { |
| | | -webkit-#{$property}: $value; |
| | | -moz-#{$property}: $value; |
| | | #{$property}: $value; |
| | | } |
| | | |
| | | @mixin prefixer-val ($property, $value) { |
| | | #{$property}: -webkit-#{$value}; |
| | | #{$property}: -moz-#{$value}; |
| | | #{$property}: #{$value}; |
| | | } |
| | | |
| | | /* ---------- position ---------- */ |
| | | /** |
| | | * position 元素定位的简写 |
| | | * 示例 |
| | | * @include position(absolute, 0 0); |
| | | * @include position(absolute, 0 n n 0, 100); |
| | | * 参数 |
| | | * $type 定位类型 |
| | | * $values 定位值 |
| | | * $zindex 定位层级 |
| | | */ |
| | | @mixin position($type, $values:(), $zindex:false) { |
| | | position: $type; |
| | | // 1个值:上 |
| | | // 当 1 个值时:上 |
| | | @if (length($values)==1) { |
| | | @if (nth($values, 1) !=n) { |
| | | top: nth($values, 1); |
| | | } |
| | | } |
| | | // 2个值:上、左 |
| | | // 当 2 个值时:上、左 |
| | | @else if (length($values)==2) { |
| | | @if (nth($values, 1) !=n) { |
| | | top: nth($values, 1); |
| | |
| | | left: nth($values, 2); |
| | | } |
| | | } |
| | | // 3个值:上、左右、下 |
| | | // 当 3 个值时:上、左右、下 |
| | | @else if (length($values)==3) { |
| | | @if (nth($values, 1) !=n) { |
| | | top: nth($values, 1); |
| | |
| | | bottom: nth($values, 3); |
| | | } |
| | | } |
| | | // 4个值:上、左、下、右 |
| | | // 当 4 个值时:上、左、下、右 |
| | | @else if (length($values)==4) { |
| | | @if (nth($values, 1) !=n) { |
| | | top: nth($values, 1); |
| | |
| | | } |
| | | |
| | | /** |
| | | * ---------- flex ---------- |
| | | * @include flexbox(); |
| | | * $mode: |
| | | * flex 适应布局 |
| | | * 示例 |
| | | * @include flexbox(flex, center center); |
| | | * 参数 |
| | | * $mode 布局类型 |
| | | * flex / inline |
| | | * $align: |
| | | * flex-start / flex-end / center / space-between / space-around |
| | | * flex-start / flex-end / center / baseline / stretch |
| | | * flex-start / flex-end / center / space-between / space-around / stretch |
| | | * $flow: |
| | | * row / row-reverse / column / column-reverse |
| | | * nowrap / wrap / wrap-reverse |
| | | * $align 对齐方式 |
| | | * <justify-content> 主轴对齐方式 |
| | | * flex-start / flex-end / center / space-between / space-around |
| | | * <align-items> 交叉轴对齐方式 |
| | | * flex-start / flex-end / center / baseline / stretch |
| | | * <align-content> 多轴对齐方式(把每根轴视为一个单元,指定所有单元的对齐方式) |
| | | * flex-start / flex-end / center / space-between / space-around / stretch |
| | | * $flow 排列方式 |
| | | * <flex-direction> 主轴方向 |
| | | * row / row-reverse / column / column-reverse |
| | | * <flex-wrap> 换行方式 |
| | | * nowrap / wrap / wrap-reverse |
| | | */ |
| | | @mixin flexbox ($mode:flex, $align:(), $flow:()) { |
| | | @if ($mode=="flex") { |
| | |
| | | } |
| | | } |
| | | |
| | | /* ---------- keyframes ---------- */ |
| | | /** |
| | | * keyframes - css 动画简写 |
| | | * 示例 |
| | | * @include keyframes(fade-out) { |
| | | * 0% { opacity: 1 } |
| | | * 100% { opacity: 0 } |
| | | * } |
| | | */ |
| | | @mixin keyframes($name) { |
| | | @-webkit-keyframes #{$name} { |
| | | @content; |
| | |
| | | } |
| | | } |
| | | |
| | | /* ---------- media ---------- */ |
| | | /** |
| | | * media - 媒体查询简写 |
| | | * 示例 |
| | | * @include media(phone) { |
| | | * .logo { |
| | | * display: none; |
| | | * } |
| | | * } |
| | | * 参数 |
| | | * $type 指定媒体类型生效,print、pc、padpro、padmini、phone |
| | | * $only 是否只在此媒体类型生效 |
| | | */ |
| | | @mixin media($type, $only:"") { |
| | | $title: ""; |
| | | // 打印媒体 |