/**
|
* mixins
|
* @author Tevin
|
*/
|
|
/**
|
* clearfix - 清除浮动
|
* 示例
|
* @include clearfix;
|
*/
|
@mixin clearfix() {
|
&:after {
|
clear: both;
|
display: block;
|
width: 100%;
|
height: 0px;
|
overflow: hidden;
|
content: " ";
|
}
|
}
|
|
/**
|
* ellipsis - 省略号
|
* 示例
|
* @include ellipsis;
|
* @include ellipsis(100%);
|
* 参数
|
* $width 宽度
|
*/
|
@mixin ellipsis($width:false) {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
@if ($width) {
|
width: $width;
|
}
|
}
|
|
/**
|
* 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 个值时：上
|
@if (length($values)==1) {
|
@if (nth($values, 1) !=n) {
|
top: nth($values, 1);
|
}
|
}
|
// 当 2 个值时：上、左
|
@else if (length($values)==2) {
|
@if (nth($values, 1) !=n) {
|
top: nth($values, 1);
|
}
|
@if (nth($values, 2) !=n) {
|
left: nth($values, 2);
|
}
|
}
|
// 当 3 个值时：上、左右、下
|
@else if (length($values)==3) {
|
@if (nth($values, 1) !=n) {
|
top: nth($values, 1);
|
}
|
@if (nth($values, 2) !=n) {
|
right: nth($values, 2);
|
left: nth($values, 2);
|
}
|
@if (nth($values, 3) !=n) {
|
bottom: nth($values, 3);
|
}
|
}
|
// 当 4 个值时：上、左、下、右
|
@else if (length($values)==4) {
|
@if (nth($values, 1) !=n) {
|
top: nth($values, 1);
|
}
|
@if (nth($values, 2) !=n) {
|
left: nth($values, 2);
|
}
|
@if (nth($values, 3) !=n) {
|
bottom: nth($values, 3);
|
}
|
@if (nth($values, 4) !=n) {
|
right: nth($values, 4);
|
}
|
}
|
@if ($zindex) {
|
z-index: $zindex;
|
}
|
}
|
|
/**
|
* flex 适应布局
|
* 示例
|
* @include flexbox(flex, center center);
|
* 参数
|
* $mode 布局类型
|
* flex / inline
|
* $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") {
|
display: -webkit-box;
|
display: -webkit-flex;
|
display: -moz-flex;
|
display: flex;
|
}
|
@else if($mode=="inline") {
|
display: -webkit-inline-box;
|
display: -webkit-inline-flex;
|
display: -moz-inline-flex;
|
display: inline-flex;
|
}
|
@if (length($align)>=1) {
|
@if (nth($align, 1) !=n) {
|
-webkit-justify-content: nth($align, 1);
|
-moz-justify-content: nth($align, 1);
|
justify-content: nth($align, 1);
|
}
|
}
|
@if(length($align)>=2) {
|
@if (nth($align, 2) !=n) {
|
-webkit-align-items: nth($align, 2);
|
-moz-align-items: nth($align, 2);
|
align-items: nth($align, 2);
|
}
|
}
|
@if(length($align)>=3) {
|
@if (nth($align, 3) !=n) {
|
-webkit-align-content: nth($align, 3);
|
-moz-align-content: nth($align, 3);
|
align-content: nth($align, 3);
|
}
|
}
|
@if (length($flow)>=1) {
|
@if (nth($flow, 1) !=n) {
|
-webkit-flex-direction: nth($flow, 1);
|
-moz-flex-direction: nth($flow, 1);
|
flex-direction: nth($flow, 1);
|
}
|
}
|
@if (length($flow)>=2) {
|
@if (nth($flow, 2) !=n) {
|
-webkit-flex-wrap: nth($flow, 2);
|
-moz-flex-wrap: nth($flow, 2);
|
flex-wrap: nth($flow, 2);
|
}
|
}
|
}
|
|
/**
|
* keyframes - css 动画简写
|
* 示例
|
* @include keyframes(fade-out) {
|
* 0% { opacity: 1 }
|
* 100% { opacity: 0 }
|
* }
|
*/
|
@mixin keyframes($name) {
|
@-webkit-keyframes #{$name} {
|
@content;
|
}
|
@-moz-keyframes #{$name} {
|
@content;
|
}
|
@keyframes #{$name} {
|
@content;
|
}
|
}
|
|
/**
|
* media - 媒体查询简写
|
* 示例
|
* @include media(phone) {
|
* .logo {
|
* display: none;
|
* }
|
* }
|
* 参数
|
* $type 指定媒体类型生效，print、pc、padpro、padmini、phone
|
* $only 是否只在此媒体类型生效
|
*/
|
@mixin media($type, $only:"") {
|
$title: "";
|
// 打印媒体
|
@if ($type=="print") {
|
$title: $title + "print";
|
}
|
// 显示器媒体
|
@else {
|
$title: $title + "screen";
|
@if ($type=="pc") {
|
// 仅电脑
|
@if ($only=="only") {
|
$title: $title + " and (min-width: 992px)";
|
}
|
// 所有设备
|
@else {}
|
}
|
@else if ($type=="padpro") {
|
// 仅大平板
|
@if ($only=="only") {
|
$title: $title + " and (min-width: 768px) and (max-width: 992px)";
|
}
|
// 所有平板和手机
|
@else {
|
$title: $title + " and (max-width: 992px)";
|
}
|
}
|
@else if ($type=="padmini") {
|
// 仅小平板
|
@if ($only=="only") {
|
$title: $title + " and (min-width: 480px) and (max-width: 768px)";
|
}
|
// 小平板和手机
|
@else {
|
$title: $title + " and (max-width: 768px)";
|
}
|
}
|
@else if ($type=="phone") {
|
// 仅手机
|
$title: $title + " and (max-width: 480px)";
|
}
|
}
|
@media #{$title} {
|
@content;
|
}
|
}
|
