@charset "UTF-8";
////////sass函数////////

//不透明度
@mixin sys-opacity($opacity:0.5, $compatible-flag:1){
    opacity:$opacity;
    @include sys-compatible-ie7-rules(){
        $value:$opacity * 100;
        filter:alpha(opacity=#{$value});
    };
}

//兼容inline-block
@mixin sys-inline-block($compatible-flag:0){
    display:inline-block;
    @include sys-compatible-ie7-rules(){
        *display:inline;
        *zoom:1;
    };
}

//inline-block重置
@mixin sys-inline-block-reset($compatible-flag:0){
    font-size:0;
    letter-spacing:-0.31em; // webkit
    word-spacing: -0.43em;// IE < 8 && gecko
    @include sys-compatible-ie7-rules(){
        *letter-spacing: normal;// IE < 8 重置
    };
}

// 盒子模型
@mixin sys-border-box(){
    @include sys-pc-compatible-rules() {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    box-sizing: border-box;
}

//清除浮动,IE8以上
@mixin sys-pseudo-clear{
    &:after{
        content:" ";
        display:block;
        overflow:hidden;
        clear:both;
        height:0;
    }
}

//链接
@mixin sys-text-url(){
    cursor:pointer;
    &,&:hover,&:focus,&.active{
        text-decoration:none;
        outline:none;
    }
}

//链接悬浮
@mixin sys-text-link($color-hover:$color-link-hover){
    &:hover,&:focus,&:active,&.active{
        color:$color-hover;
    }
}

// 按钮
@mixin sys-btn-func($color-bg:#ccc, $color-text:#fff, $color-border:#ccc){
    color:$color-text;
    background-color:$color-bg;
    border-color:$color-border;
    &:hover,&:focus,&:active,&.active{
        color:$color-text;
        background-color:darken($color-bg, 5%);
    }
    &.disabled{
        @include sys-disabled();
        &:hover,&:focus,&:active,&.active{
            color:$color-text;
            background-color:$color-bg;
        }
    }
}

// 边框按钮
@mixin sys-btn-border-func($color-bg:#ccc, $color-text:#fff){
    color:$color-text;
    background-color:$color-bg;
    border:1px solid $color-text;
    &:hover,&:focus,&:active,&.active{
        color:$color-text;
        border-color:darken($color-text, 5%);
    }
}

//去除列表默认样式
@mixin sys-list-none{
    padding-left:0;
    &,& > li{
        list-style:none;
    }
}

//文字省略
@mixin sys-ellipsis($height:none, $width:none){
    @if type-of($height) == 'number'{
        height:$height;
        line-height:$height;
    }
    @if type-of($width) == 'number'{
        width:$width;
    }
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

//字符截取
@mixin sys-text-camp($row:1, $h-line:none, $width:none){
    overflow:hidden;
    @if type-of($h-line) == 'number'{
        height:$row * $h-line;
        line-height:$h-line;
    }
    @if type-of($width) == 'number'{
        width:$width;
    }
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:$row;
}

//placeholder设置
@mixin sys-placeholder($color:#bbb){
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {// Safari and Chrome
        color:$color;
    }
    @include sys-pc-compatible-rules(){
        input:-moz-placeholder, textarea:-moz-placeholder {// Firefox 4-18
            color:$color;
        }
        input::-moz-placeholder, textarea::-moz-placeholder {// Firefox 19+
            color:$color;
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {// Internet Explorer 10+
            color:$color;
        }
    };
}

//透明背景颜色兼容
@mixin sys-bg-rgba($r, $g, $b, $a, $color:0){
    @if type_of($color) == number{
        $start:ie-hex-str(rgba($r, $g, $b, $a));
        $end:ie-hex-str(rgba($r, $g, $b, $a));
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{$start}', endColorstr='#{$end}');
    }@else{
        background:$color;
    }
    background:rgba($r, $g, $b, $a);
}

//右背景设置
@mixin sys-bg-right($right: 0, $vertical: center){
    background-position: right $right $vertical;
    background-position: -webkit-calc(100% - $right) $vertical;
    background-position: calc(100% - $right) $vertical;
}

//线性渐变
@mixin sys-gradient ($origin: left, $start: #ffffff, $stop: #000000) {//top,left,bottom,right
    background-color: $start;
    background: -webkit-linear-gradient($origin, $start, $stop);
    background: -moz-linear-gradient($origin, $start, $stop);
    background: -o-linear-gradient($origin, $start, $stop);
    background: -ms-linear-gradient($origin, $start, $stop);
    background: linear-gradient($origin, $start, $stop);
    @include sys-pc-compatible-rules(){
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}',endColorstr='#{$stop}');
        //低于Internet Explorer 版本8
        -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}',endColorstr='#{$stop}');
    };
}
//径向渐变
@mixin sys-gradient-radial($type:circle, $start: #ffffff, $stop: #000000){
    background: radial-gradient($type, $start, $stop);
    background: -webkit-radial-gradient($type, $start, $stop);
    @include sys-pc-compatible-rules(){
        background: -moz-radial-gradient($type, $start, $stop);
        background: -o-radial-gradient($type, $start, $stop);
        background: -ms-radial-gradient($type, $start, $stop);
    };
}

//图片灰度设置
@mixin sys-gray($num:100%){
    -webkit-filter: grayscale($num);
    -moz-filter: grayscale($num);
    -ms-filter: grayscale($num);
    -o-filter: grayscale($num);
    filter: grayscale($num);
    filter: gray;
}

//兼容阴影
@mixin sys-box-shadow($arguments...){
    box-shadow:$arguments;
    -webkit-box-shadow:$arguments;
    @include sys-pc-compatible-rules(){
        -moz-box-shadow:$arguments;
    };
}
//例：@include sys-box-shadow(0 3px 3px 3px #f1f1f1);
//兼容ie隐藏
@mixin sys-box-shadow-ms($h-shadow:0,$v-shadow:0,$blur:2px,$spread:2px,$color:#eeeeee){
    box-shadow:$h-shadow $v-shadow $blur $spread $color;
    -webkit-box-shadow:$h-shadow $v-shadow $blur $spread $color;
    @include sys-pc-compatible-rules(){
        -moz-box-shadow:$h-shadow $v-shadow $blur $spread $color;
        $strength:round($blur);
        //低于Internet Explorer 版本8
        filter:progid:DXImageTransform.Microsoft.Shadow(color='#{$color}', direction=0, strength='#{$strength}') progid:DXImageTransform.Microsoft.Shadow(color='#{$color}', direction=90, strength='#{$strength}') progid:DXImageTransform.Microsoft.Shadow(color='#{$color}' direction=180, strength='#{$strength}') progid:DXImageTransform.Microsoft.Shadow(color='#{$color}', direction=270, strength='#{$strength}');
        // IE9+及标准浏览器支持，IE8及更低版本只能通过滤镜或通过背景图片实现
        -ms-filter:progid:DXImageTransform.Microsoft.Shadow(color='#{$color}',direction=0,strength='#{$strength}') progid:DXImageTransform.Microsoft.Shadow(color='#{$color}',direction=90,strength='#{$strength}') progid:DXImageTransform.Microsoft.Shadow(color='#{$color}',direction=180,strength='#{$strength}') progid:DXImageTransform.Microsoft.Shadow(color='#{$color}',direction=270,strength='#{$strength}');
    };
}

//圆角
@mixin sys-border-radius($radius:5px){
    border-radius:$radius;
    -webkit-border-radius:$radius;
    @include sys-pc-compatible-rules(){
        -moz-border-radius:$radius;
    };
}
@mixin sys-border-topleft-radius($radius:5px){
    border-top-left-radius:$radius;
    -webkit-border-top-left-radius:$radius;
    @include sys-pc-compatible-rules(){
        -moz-border-radius-topleft:$radius;
    };
}
@mixin sys-border-topright-radius($radius:5px){
    border-top-right-radius:$radius;
    -webkit-border-top-right-radius:$radius;
    @include sys-pc-compatible-rules(){
        -moz-border-radius-topright:$radius;
    };
}
@mixin sys-border-bottomright-radius($radius:5px){
    border-bottom-right-radius:$radius;
    -webkit-border-bottom-right-radius:$radius;
    @include sys-pc-compatible-rules(){
        -moz-border-radius-bottomright:$radius;
    };
}
@mixin sys-border-bottomleft-radius($radius:5px){
    border-bottom-left-radius:$radius;
    -webkit-border-bottom-left-radius:$radius;
    @include sys-pc-compatible-rules(){
        -moz-border-radius-bottomleft:$radius;
    };
}

//前缀控制
$prefix-for-w3c:         true;
$prefix-for-webkit:       true;
$prefix-for-moz:      true;
$prefix-for-o:        true;
$prefix-for-ms:    true;
@mixin prefix-for-all($flag-w3c:true, $flag-webkit:true, $flag-moz:true, $flag-o:true, $flag-ms:true) {
    @if $flag-w3c == true{
        $flag-w3c : true
    }@else{
        $flag-w3c : false
    }
    $prefix-for-w3c:      $flag-w3c!global;

    @if $flag-webkit == true{
        $flag-webkit : true;
    }@else{
        $flag-webkit : false;
    }
    $prefix-for-webkit:    $flag-webkit!global;

    @if $flag-moz == true{
        $flag-moz : true;
    }@else{
        $flag-moz : false;
    }
    $prefix-for-moz:   $flag-moz!global;

    @if $flag-o == true{
        $flag-o : true;
    }@else{
        $flag-o : false;
    }
    $prefix-for-o:     $flag-o!global;

    @if $flag-ms == true{
        $flag-ms : true;
    }@else{
        $flag-ms : false;
    }
    $prefix-for-ms: $flag-ms!global;
}

//设置前缀
@mixin sys-prefix-add($name, $value, $w3c:true, $webkit:true, $moz:true, $o:true, $ms:true){
    @if $prefix-for-w3c == true{
        @if $w3c == true{
            #{$name}:$value;
        }
    }
    @if $prefix-for-webkit == true {
        @if $webkit == true {
            -webkit-#{$name}: $value;
        }
    }
    @if $prefix-for-moz == true {
        @if $moz == true {
            -moz-#{$name}: $value;
        }
    }
    @if $prefix-for-o == true {
        @if $o == true {
            -o-#{$name}: $value;
        }
    }
    @if $prefix-for-ms == true {
        @if $ms == true {
            -ms-#{$name}: $value;
        }
    }
}

//css3动画
@mixin sys-animation($arguments...){
    animation: $arguments;
    -webkit-animation: $arguments;
    @include sys-pc-compatible-rules(){
        -moz-animation: $arguments;
        -o-animation: $arguments;
        -ms-animation: $arguments;
    };
}
@mixin sys-animation-name($name){
    animation-name: $name;
    -webkit-animation-name: $name;
    @include sys-pc-compatible-rules(){
        -moz-animation-name: $name;
        -o-animation-name: $name;
        -ms-animation-name: $name;
    };
}
@mixin sys-animation-duration($duration){
    animation-duration: $duration;
    -webkit-animation-duration: $duration;
    @include sys-pc-compatible-rules(){
        -moz-animation-duration: $duration;
        -o-animation-duration: $duration;
        -ms-animation-duration: $duration;
    };
}
@mixin sys-animation-timing-function($timing-function){
    animation-timing-function: $timing-function;
    -webkit-animation-timing-function: $timing-function;
    @include sys-pc-compatible-rules(){
        -moz-animation-timing-function: $timing-function;
        -o-animation-timing-function: $timing-function;
        -ms-animation-timing-function: $timing-function;
    };
}
@mixin sys-animation-delay($delay){
    animation-delay: $delay;
    -webkit-animation-delay: $delay;
    @include sys-pc-compatible-rules(){
        -moz-animation-delay: $delay;
        -o-animation-delay: $delay;
        -ms-animation-delay: $delay;
    };
}
@mixin sys-animation-iteration-count($iteration-count){
    animation-iteration-count: $iteration-count;
    -webkit-animation-iteration-count: $iteration-count;
    @include sys-pc-compatible-rules(){
        -moz-animation-iteration-count: $iteration-count;
        -o-animation-iteration-count: $iteration-count;
        -ms-animation-iteration-count: $iteration-count;
    };
}
@mixin sys-animation-direction($direction){
    animation-direction: $direction;
    -webkit-animation-direction: $direction;
    @include sys-pc-compatible-rules(){
        -moz-animation-direction: $direction;
        -o-animation-direction: $direction;
        -ms-animation-direction: $direction;
    };
}
@mixin sys-animation-fill-mode($mode){
    animation-fill-mode: $mode;
    -webkit-animation-fill-mode: $mode;
    @include sys-pc-compatible-rules(){
        -moz-animation-fill-mode: $mode;
        -o-animation-fill-mode: $mode;
        -ms-animation-fill-mode: $mode;
    };
}
@mixin sys-animation-name($name){
    animation-name: $name;
    -webkit-animation-name: $name;
    @include sys-pc-compatible-rules(){
        -moz-animation-name: $name;
        -o-animation-name: $name;
        -ms-animation-name: $name;
    };
}
@mixin sys-keyframes ($name, $w3c:true, $webkit:true, $moz:true, $o:true, $ms:true) {
    @if $w3c == true{
        @include prefix-for-all(0, 0, 0, 0, 0);
        $prefix-for-w3c:true !global;
        @keyframes #{$name} {
            @content
        }
    }
    @if $webkit == true{
        @include prefix-for-all(0, 0, 0, 0, 0);
        $prefix-for-webkit:true !global;
        @-webkit-keyframes #{$name} {
            @content
        }
    }
    @if $moz == true{
        @include prefix-for-all(0, 0, 0, 0, 0);
        $prefix-for-moz:true !global;
        @-moz-keyframes #{$name} {
            @content
        }
    }
    @if $o == true{
        @include prefix-for-all(0, 0, 0, 0, 0);
        $prefix-for-o:true !global;
        @-o-keyframes #{$name} {
            @content
        }
    }
    @if $ms == true{
        @include prefix-for-all(0, 0, 0, 0, 0);
        $prefix-for-ms:true !global;
        @-ms-keyframes #{$name} {
            @content
        }
    }
    @include prefix-for-all(0, 0, 0, 0, 0);
}

//div {
//    animation: myfirst 5s;
//    -moz-animation: myfirst 5s;	/* Firefox */
//    -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
//    -o-animation: myfirst 5s;	/* Opera */
//    -ms-animation: myfirst 5s;	/* ms */
//}
//@keyframes myfirst
//{
//    from {background: red;}
//    to {background: yellow;}
//}
//
//@-moz-keyframes myfirst /* Firefox */
//{
//    from {background: red;}
//    to {background: yellow;}
//}
//
//@-webkit-keyframes myfirst /* Safari 和 Chrome */
//{
//    from {background: red;}
//    to {background: yellow;}
//}
//
//@-o-keyframes myfirst /* Opera */
//{
//    from {background: red;}
//    to {background: yellow;}
//}
//
//@-ms-keyframes myfirst /* ms */
//{
//    from {background: red;}
//    to {background: yellow;}
//}

//转换
@mixin sys-transform($arguments...){
    transform:$arguments;
    -webkit-transform:$arguments; // Safari 和 Chrome
    @include sys-pc-compatible-rules(){
        -ms-transform:$arguments; 	// IE 9
        -moz-transform:$arguments; 	// Firefox
        -o-transform:$arguments; 	// Opera
    };
}

//2d旋转
@mixin sys-rotate($degrees) {
    transform: rotate($degrees);
    -webkit-transform: rotate($degrees);
    @include sys-pc-compatible-rules(){
        -moz-transform: rotate($degrees);
        -ms-transform: rotate($degrees);
        -o-transform: rotate($degrees);
    };
}
@mixin sys-rotatex($degrees) {
    transform: rotateX($degrees);
    -webkit-transform: rotateX($degrees);
    @include sys-pc-compatible-rules(){
        -moz-transform: rotateX($degrees);
        -ms-transform: rotateX($degrees);
        -o-transform: rotateX($degrees);
    };
}
@mixin sys-rotatey($degrees) {
    transform: rotateY($degrees);
    -webkit-transform: rotateY($degrees);
    @include sys-pc-compatible-rules(){
        -moz-transform: rotateY($degrees);
        -ms-transform: rotateY($degrees);
        -o-transform: rotateY($degrees);
    };
}
@mixin sys-rotatez($degrees) {
    transform: rotateZ($degrees);
    -webkit-transform: rotateZ($degrees);
    @include sys-pc-compatible-rules(){
        -moz-transform: rotateZ($degrees);
        -ms-transform: rotateZ($degrees);
        -o-transform: rotateZ($degrees);
    };
}

//缩放
@mixin sys-scale($ratioX:1, $ratioY:1) {
    transform: scale($ratioX, $ratioY);
    -webkit-transform: scale($ratioX, $ratioY);
    @include sys-pc-compatible-rules(){
        -moz-transform: scale($ratioX, $ratioY);
        -ms-transform: scale($ratioX, $ratioY);
        -o-transform: scale($ratioX, $ratioY);
    };
}
@mixin sys-scalex($ratio:1) {
    transform: scaleX($ratio);
    -webkit-transform: scaleX($ratio);
    @include sys-pc-compatible-rules(){
        -moz-transform: scaleX($ratio);
        -ms-transform: scaleX($ratio);
        -o-transform: scaleX($ratio);
    };
}
@mixin sys-scaley($ratio:1) {
    transform: scaleY($ratio);
    -webkit-transform: scaleY($ratio);
    @include sys-pc-compatible-rules(){
        -moz-transform: scaleY($ratio);
        -ms-transform: scaleY($ratio);
        -o-transform: scaleY($ratio);
    };
}
@mixin sys-scalez($ratio:1) {
    transform: scaleZ($ratio);
    -webkit-transform: scaleZ($ratio);
    @include sys-pc-compatible-rules(){
        -moz-transform: scaleZ($ratio);
        -ms-transform: scaleZ($ratio);
        -o-transform: scaleZ($ratio);
    };
}

//2d转化
@mixin sys-translate($x:0, $y:0) {
    transform: translate($x, $y);
    -webkit-transform: translate($x, $y);
    @include sys-pc-compatible-rules(){
        -moz-transform: translate($x, $y);
        -ms-transform: translate($x, $y);
        -o-transform: translate($x, $y);
    };
}
@mixin sys-translatex($x:0) {
    transform: translateX($x);
    -webkit-transform: translateX($x);
    @include sys-pc-compatible-rules(){
        -moz-transform: translateX($x);
        -ms-transform: translateX($x);
        -o-transform: translateX($x);
    };
}
@mixin sys-translatey($y:0) {
    transform: translateY($y);
    -webkit-transform: translateY($y);
    @include sys-pc-compatible-rules(){
        -moz-transform: translateY($y);
        -ms-transform: translateY($y);
        -o-transform: translateY($y);
    };
}

//2D 倾斜转换
@mixin sys-skew($x, $y) {
    transform: skew($x, $y);
    -webkit-backface-visibility: hidden;
    -webkit-transform: skew($x, $y);
    @include sys-pc-compatible-rules(){
        -moz-transform: skew($x, $y);
        -ms-transform: skewX($x) skewY($y);
        -o-transform: skew($x, $y);
    };
}

//3d旋转
@mixin sys-translate3d($x:0, $y:0, $z:0) {
    transform: translate3d($x, $y, $z);
    -webkit-transform: translate3d($x, $y, $z);
    @include sys-pc-compatible-rules(){
        -moz-transform: translate3d($x, $y, $z);
        -o-transform: translate3d($x, $y, $z);
    };
}

//过渡
@mixin sys-transition($name:all, $time:0.5s, $timing-function:ease){
    transition:$name $time $timing-function;
    -webkit-transition:$name $time $timing-function;
    @include sys-pc-compatible-rules(){
        -moz-transition:$name $time $timing-function;
        -o-transition:$name $time $timing-function;
        -ms-transition:$name $time $timing-function;
    };
}
@mixin sys-transition-fix($name:all, $time:0.5s, $timing-function:ease, $delay:0s){
    $w3cName : $name;
    $webkitName : $name;
    $mozName : $name;
    $oName : $name;
    $msName : $name;
    $webkitName : -webkit- + $name;
    $mozName : -moz- + $name;
    $oName : -o- + $name;
    $msName : -ms- + $name;
    transition:$w3cName $time $timing-function $delay;
    -webkit-transition:$webkitName $time $timing-function $delay;
    @include sys-pc-compatible-rules(){
        -moz-transition:$mozName $time $timing-function $delay;
        -o-transition:$oName $time $timing-function $delay;
        -ms-transition:$msName $time $timing-function $delay;
    };
}

//过渡属性名
@mixin sys-transition-property($arguments...){
    transition-property: $arguments;
    -webkit-transition-property: $arguments;
    @include sys-pc-compatible-rules(){
        -moz-transition-property: $arguments;
        -o-transition-property: $arguments;
        -ms-transition-property: $arguments;
    };
}

//过渡时间
@mixin sys-transition-duration($duration:0.5s){
    transition-duration: $duration;
    -webkit-transition-duration: $duration;
    @include sys-pc-compatible-rules(){
        -moz-transition-duration: $duration;
        -o-transition-duration: $duration;
        -ms-transition-duration:$duration;
    };
}

//尖角
@mixin sys-triangle($top-width:5px, $right-width:5px, $color:#ccc, $type:left){
    overflow:hidden;
    display:block;
    width:0;
    height:0;
    border-style:solid;
    border-width:$top-width $right-width;
    @if $type == top{
        border-color:$color transparent transparent transparent;
    }@else if $type == right{
        border-color:transparent $color transparent transparent;
    }@else if $type == bottom{
        border-color:transparent transparent $color transparent;
    }@else{
        border-color:transparent transparent transparent $color;
    }
}

//兼容圆角
@mixin sys-little-radius($width:5px,$border-width:1px,$bgurl:''){
    $trans:-$width;
    color:#fff;
    .radi{
        position:absolute;
        width:$width;
        height:$width;
        z-index:0;
        background:url("#{$bgurl}") no-repeat;
    }
    .radi-lt{
        left:-$border-width;
        top:-$border-width;
        background-position:0 0;
    }
    .radi-rt{
        right:-$border-width;
        top:-$border-width;
        background-position:$trans 0;
    }
    .radi-lb{
        left:-$border-width;
        bottom:-$border-width;
        background-position:0 $trans;
    }
    .radi-rb{
        right:-$border-width;
        bottom:-$border-width;
        background-position:$trans $trans;
    }
}

//文字选中
@mixin sys-user-select($result:none){
    user-select: $result;
    -webkit-user-select: $result;//webkit浏览器
    @include sys-pc-compatible-rules(){
        -moz-user-select: $result;//火狐
        -ms-user-select: $result;//IE10
        -khtml-user-select: $result;//早期浏览器
    };
}
//文字选中状态
@mixin sys-user-select-status($el:div){
    #{$el}::selection {@content}
    #{$el}::-webkit-selection {@content}
    #{$el}::-moz-selection {@content}
}

//禁用公用
@mixin sys-disabled(){
    @include sys-opacity(0.7);
    @include sys-user-select(none);
    cursor:not-allowed;
}

//子元素居中
@mixin sys-vertical($height:200px){
    height:$height;
    line-height:$height - 4;
    //font-size:@height / 2;
    @include sys-compatible-ie7-rules(){
        *font-size:$height - ceil($height / 4);
    };
}

//图片水平垂直居中
@mixin sys-center-vertical-cell($cell-height:200px, $cell-width:none, $target:img){
    display:block;
    overflow:hidden;
    @if type_of($cell-width) == number{
        width:$cell-width;
    }
    @include sys-vertical($cell-height);
    text-align:center;
    #{$target}{
        @include sys-inline-block();
        vertical-align:middle;
        max-width:100%;
        max-height:100%;
    }
}

//窗口fixed水平垂直居中
@mixin sys-fixed-center-vertical($width, $height){
    position:fixed;
    @if (type_of($width) == number){
        margin-left:0 - $width / 2;
        width:$width;
        left:50%;
    }
    @if (type_of($height) == number){
        margin-top:0 - $height / 2;
        height:$height;
        top:50%;
    }
}

//循环遍历设置属性
@mixin sys-loop-property($total:12, $pre:col-, $key:width, $start:1){
    .#{$pre}#{$start}{
        #{$key}:unquote($start * 100 / 12 + '%');
    }
    @if($start < $total){
        @include sys-loop-property($total, $pre, $key, $start + 1);
    }
}

//列
@mixin sys-col-func($total:12, $pre:col-, $prop:width, $start:1){
    .#{$pre}#{$start}{
        #{$prop}:unquote($start * 100 / 12 + '%');
    }
    @if($start < $total){
        @include sys-col-func($total, $pre, $prop, $start + 1);
    }
}

//进度条
@mixin sys-process-bar($width:5px, $height:5px, $bgImg:0, $bgtop:0){
    width:$width;
    height:$height;
    .process-percent{
        width:0;
        height:$height;
    }
    @if (type_of($bgImg) == string){
        background:url($bgImg) no-repeat 0 $bgtop;
        .process-percent{
            background:url($bgImg) no-repeat 0 $bgtop - $height;
        }
    }
}

//hr线
@mixin sys-hr-line($color:#ccc, $width:1px, $style:solid, $location:top){
    height:0;
    border:none;
    border-#{$location}:$width $style $color;
}

//前横线
@mixin sys-border-horizon-before($color-b:$color-border){
    &:before {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        @include sys-scaley(0.5);
        background-color: $color-b;
    }
}
//后横线
@mixin sys-border-horizon-after($color-b:$color-border){
    &:after {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        @include sys-scaley(0.5);
        background-color: $color-b;
    }
}
//前竖线
@mixin sys-border-vertical-before($color-b:$color-border){
    &:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 1px;
        @include sys-scalex(0.5);
        background-color: $color-b;
    }
}
//后竖线
@mixin sys-border-vertical-after($color-b:$color-border){
    &:after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        @include sys-scalex(0.5);
        background-color: $color-b;
    }
}

////角////
@mixin sys-caret-top($width:4px){
    border-top: none;
    border-bottom: $width solid;
    border-right: $width solid transparent;
    border-left: $width solid transparent;
}
@mixin sys-caret-right($width:4px){
    border-left: $width solid;
    border-top: $width solid transparent;
    border-bottom: $width solid transparent;
}
@mixin sys-caret-bottom($width:4px){
    border-top: $width solid;
    border-right: $width solid transparent;
    border-left: $width solid transparent;
}
@mixin sys-caret-left($width:4px){
    border-right: $width solid;
    border-top: $width solid transparent;
    border-bottom: $width solid transparent;
}
@mixin sys-caret($width:4px, $type:bottom){
    overflow: hidden;
    @include sys-inline-block();
    width: 0;
    height: 0;
    margin-left: $width;
    vertical-align: middle;
    @if ($type == top){
        @include sys-caret-top($width);
    }
    @if ($type == right){
        @include sys-caret-right($width);
    }
    @if ($type == bottom){
        @include sys-caret-bottom($width);
    }
    @if ($type == left){
        @include sys-caret-left($width);
    }
}

////箭头////
//上角
@mixin sys-bugle-top($color-bugle:#ddd, $color-bg:#fff, $gap:1px){
    &:before,.bugle-in{
        left:0;
        bottom:0 - floor($gap / 2);
        top:auto;
        right:auto;
        border-color:transparent;
        border-bottom-color:$color-bg;
    }
    &:after,.bugle-out{
        left:0;
        top:0 - ceil($gap / 2);
        bottom:auto;
        right:auto;
        border-color:$color-bg $color-bg transparent $color-bg;
    }
};

//右角
@mixin sys-bugle-right($color-bugle:#ddd, $color-bg:#fff, $gap:1px){
    &:before,.bugle-in{
        top:0;
        left:0 - floor($gap / 2);
        bottom:auto;
        right:auto;
        border-color:transparent;
        border-left-color:$color-bg;
    }
    &:after,.bugle-out{
        top:0;
        right:0 - ceil($gap / 2);
        bottom:auto;
        left:auto;
        border-color:$color-bg $color-bg $color-bg transparent;
    }
};

//下角
@mixin sys-bugle-bottom($color-bugle:#ddd, $color-bg:#fff, $gap:1px){
    &:before,.bugle-in{
        left:0;
        top:0 - floor($gap / 2);
        bottom:auto;
        right:auto;
        border-color:transparent;
        border-top-color:$color-bg;
    }
    &:after,.bugle-out{
        left:0;
        bottom:0 - ceil($gap / 2);
        right:auto;
        top:auto;
        border-color:transparent $color-bg $color-bg $color-bg;
    }
};

//左角
@mixin sys-bugle-left($color-bugle:#ddd, $color-bg:#fff, $gap:1px){
    &:before,.bugle-in{
        top:0;
        right:0 - floor($gap / 2);
        bottom:auto;
        left:auto;
        border-color:transparent;
        border-right-color:$color-bg;
    }
    &:after,.bugle-out{
        top:0;
        left:0 - ceil($gap / 2);
        right:auto;
        bottom:auto;
        border-color:$color-bg transparent $color-bg $color-bg;
    }
};

//角通用
@mixin sys-bugle($color-bugle:#ddd, $color-bg:#fff, $type:bottom, $gap:1px, $unit:12px){
    $u:ceil($unit / 2) * 2;
    @include sys-inline-block();
    overflow:hidden;
    position:relative;
    width:$u;
    height:$u;
    background:$color-bugle;
    &:before,&:after{
        content:" ";
    }
    .bugle-in,.bugle-out,
    &:before,&:after{
        overflow:hidden;
        position:absolute;
        width:0;
        height:0;
        border-style:solid;
        border-width:ceil($unit / 2);
        border-color:transparent;
    }
    @if ($type == top){
        @include sys-bugle-top($color-bugle, $color-bg, $gap);
    }
    @if ($type == right){
        @include sys-bugle-right($color-bugle, $color-bg, $gap);
    }
    @if ($type == bottom){
        @include sys-bugle-bottom($color-bugle, $color-bg, $gap);
    }
    @if ($type == left){
        @include sys-bugle-left($color-bugle, $color-bg, $gap);
    }
}

//flex布局
@mixin sys-flex(){
    display: flex;
    display: -webkit-flex;
    @include sys-pc-compatible-rules(){
        display: -moz-box;
        display: -ms-flexbox;
    };
}

//项目的排列方向,row | row-reverse | column | column-reverse;
@mixin sys-flex-direction($value:row){
    @if($value == row){
        @include sys-pc-compatible-rules(){
            -webkit-box-orient: horizontal;
        };
    }
    @if($value == column){
        @include sys-pc-compatible-rules(){
            -webkit-box-orient: vertical;
        };
    }
    flex-direction: $value;
    -webkit-flex-direction: $value;
    @include sys-pc-compatible-rules(){
        -moz-flex-direction: $value;
        -ms-flex-direction: $value;
        -o-flex-direction: $value;
    };
}

//项目在主轴上的对齐方式,flex-start | flex-end | center | space-between | space-around;
@mixin sys-justify-content($value:flex-start){
    @if($value == flex-start){
        @include sys-pc-compatible-rules(){
            -webkit-box-pack: start;
        };
    }
    @if($value == flex-end){
        @include sys-pc-compatible-rules(){
            -webkit-box-pack: end;
        };
    }
    justify-content: $value;
    -webkit-justify-content: $value;
    @include sys-pc-compatible-rules(){
        -moz-justify-content: $value;
        -ms-justify-content: $value;
        -o-justify-content: $value;
    };
}

//项目在交叉轴上如何对齐,flex-start | flex-end | center | baseline | stretch;
@mixin sys-align-items($value:flex-start){
    @if($value == flex-start){
        @include sys-pc-compatible-rules(){
            -webkit-box-align: start;
        };
    }
    @if($value == flex-end){
        @include sys-pc-compatible-rules(){
            -webkit-box-align: end;
        };
    }
    align-items: $value;
    -webkit-align-items: $value;
    @include sys-pc-compatible-rules(){
        -moz-align-items: $value;
        -ms-align-items: $value;
        -o-align-items: $value;
    };
}

//定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start | flex-end | center | space-between | space-around | stretch
@mixin sys-align-content($value:flex-start){
    align-content: $value;
}

//如果一条轴线排不下，如何换行nowrap | wrap | wrap-reverse;
@mixin sys-flex-wrap($value:nowrap){
    flex-wrap:$value;
    -webkit-flex-wrap: $value;
    @include sys-pc-compatible-rules(){
        -moz-flex-wrap: $value;
        -ms-flex-wrap: $value;
        -o-flex-wrap: $value;
    };
}

////////子项样式////////
//初始长度，分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
@mixin sys-flex-basis($value:auto){
    flex-basis: $value;
    -webkit-flex-basis: $value;
    @include sys-pc-compatible-rules(){
        -moz-flex-basis: $value;
        -ms-flex-basis: $value;
    };
}

//项目的放大比例，默认为0，即如果存在剩余空间，也不放大
@mixin sys-flex-grow($value:0){
    flex-grow: $value;
    -webkit-flex-grow: $value;
    @include sys-pc-compatible-rules(){
        -moz-flex-grow: $value;
        -ms-flex-grow: $value;
    };
}

//项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
@mixin sys-flex-shrink($value:1){
    flex-shrink: $value;
    -webkit-flex-shrink: $value;
    @include sys-pc-compatible-rules(){
        -moz-flex-shrink: $value;
        -ms-flex-shrink: $value;
    };
}

//项目的放大、缩小、原始比例，默认为0 1 auto
@mixin sys-flex-item($value:0){
    box-flex:$value;
    -webkit-box-flex:$value;

    -webkit-flex: $value;
    flex: $value;
    @include sys-pc-compatible-rules(){
        -moz-flex: $value;
        -ms-flex: $value;
        -moz-box-flex:$value;
    };
}

//定义项目的排列顺序。数值越小，排列越靠前，默认为0。
@mixin sys-flex-order($value:0){
    order: $value;
}

//定义flex子项单独在侧轴（纵轴）方向上的对齐方式auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
@mixin sys-align-self($value:auto){
    -webkit-align-self: $value;
    align-self: $value;
}


////////复杂组件函数////////
//文本列表
@mixin sys-text-list-public($dd-height:20px,$icon-unit:4px,$dl-padding:10px,$border-color:#cecece,$dd-padding:5px 0, $color-text:#333, $color-link:#333, $color-time:#999, $color-hover:#333){
    .list-container{
        overflow:hidden;
        padding:$dl-padding;
    }
    .list-item{
        overflow:hidden;
        padding:$dd-padding;
    }
    .item-icon{
        overflow:hidden;
        float:left;
        margin: ($dd-height - $icon-unit * 2) / 2 3px 0 0;
        width:0;
        height:0;
        border-style: solid;
        border-width: $icon-unit;
        border-color: transparent transparent transparent $border-color;
    }
    .item-text{
        @include sys-ellipsis($dd-height);
        color:$color-text;
    }
    .item-link{
        display:block;
        @include sys-ellipsis();
        color:$color-link;
        &:hover,&:active{
            color:$color-hover;
        }
    }
    .item-time{
        float:right;
        margin-left:10px;
        text-align:right;
        white-space: nowrap;
        color:$color-time;
        font-size:12px;
    }
}

//图片列表
@mixin sys-image-list-public($li-width:225px, $cell-height:155px, $li-right:51px, $li-top:34px, $text-top:16px, $list-padding:0 5px, $list-height:none, $cell-border:1px, $line-height-dif:4, $li-border:0, $color-hover:#333){
    $border-color:#cecece;
    overflow:hidden;
    padding:$list-padding;
    .list-container{
        margin-right:0 - $li-right;
        padding:0;
    }
    .list-item{
        float:left;
        margin:$li-top $li-right 0 0;
        padding:0;
        width:$li-width;
        border-width:$li-border;
        @if(type-of($list-height) == 'number'){
            height:$list-height;
        }
    }
    .item-cell{
        @include sys-center-vertical-cell($cell-height, $li-width - 2 * $cell-border - 2 * $li-border);
        border:$cell-border solid $border-color;
    }
    .item-text{
        margin-top:$text-top;
        @include sys-ellipsis(26px);
        text-align:center;
    }
    .item-link{
        &:hover,&:active{
            color:$color-hover;
        }
    }
}

//图文列表
@mixin sys-list-image-text-public($cell-width:240px, $cell-height:180px, $li-padding:20px, $color-more:#ee7638, $line-height:24px, $border-color:#eee, $border-width:1px, $color-hover:#333){
    .list-item{
        overflow:hidden;
        padding-bottom:$li-padding;
        border-bottom:$border-width solid $border-color;
        & + .list-item{
            margin-top:$li-padding;
        }
    }
    .item-cell{
        float:left;
        margin-right:15px;
        @include sys-center-vertical-cell($cell-height, $cell-width);
    }
    .item-text{
        overflow:hidden;
    }
    .item-caption{
        font-size:16px;
        color:#333;
    }
    .item-time{
        margin:5px 0 15px;
        padding:0;
        color:#999;
    }
    .item-detail{
        margin-right:5px;
        color:#666;
        line-height:$line-height;
    }
    .item-more{
        color:$color-more;
    }
    .item-link{
        &:hover,&:active{
            color:$color-hover;
        }
    }
}

//图文列表
@mixin sys-list-handler($unit:20px, $bg-color:#000, $bg-color-active:#e84a01){
    position:absolute;
    bottom:10px;
    height:$unit;
    font-size:0;
    text-align: center;
    li{
        @include sys-inline-block();
        margin:0 4px;
        width:$unit;
        height:$unit;
        text-align:center;
        line-height:$unit;
        background:$bg-color;
        color:#fff;
        cursor:pointer;
        font-size:12px;
        &:hover,&.active{
            background:$bg-color-active;
        }
    }
}

//自适应rem配置
$view-base:640;//750,1125
$rem-font-size-num:40;//默认40px
$rem-font-base:1rem * $rem-font-size-num;
$rem-loop-num:20;//遍历间隔
$rem-column: 10;
@mixin sys-rem-set($view-base:640){//默认设计图尺寸宽度
    $font-px-base:1px * $rem-font-size-num;
    ////尺寸计算1////页面设置：div{width:实际宽度 / $rem-font-base}
    //尺寸设置
    html {
        font-size: ceil($font-px-base * $view-base / $view-base);
    }
    @include sys-rem-loop(200, $view-base, $font-px-base);

    ////尺寸计算2////页面设置：div{width:实际宽度 / $rem-font-base}
    //(min-width:200px)
//    $view-xxs-font-size:ceil($font-px-base * 200 / $view-base);
//    //(min-width:320px)
//    $view-xs-font-size:ceil($font-px-base * 320 / $view-base);
//    //(min-width:480px)
//    $view-sm-font-size:ceil($font-px-base * 480 / $view-base);
//    //(min-width:640)
//    $view-ms-font-size:ceil($font-px-base * 640 / $view-base);
//    //(min-width:720)
//    $view-md-font-size:ceil($font-px-base * 720 / $view-base);
//    //(min-width:980)
//    $view-lg-font-size:ceil($font-px-base * 980 / $view-base);
//    //(min-width:1200)
//    $view-xl-font-size:ceil($font-px-base * 1200 / $view-base);
//    //尺寸设置
//    html{
//        font-size:$view-ms-font-size;
//    }
//    @media (min-width:200px){
//        html {
//            font-size:$view-xxs-font-size
//        }
//    }
//    @media (min-width:320px){
//        html {
//            font-size:$view-xs-font-size
//        }
//    }
//    @media (min-width:480px){
//        html {
//            font-size: $view-sm-font-size;
//        }
//    }
//    @media (min-width:640px) {
//        html {
//            font-size: $view-ms-font-size
//        }
//    }
//    @media (min-width:720px) {
//        html {
//            font-size: $view-md-font-size
//        }
//    }
//    @media (min-width:980px) {
//        html {
//            font-size: $view-lg-font-size
//        }
//    }
//    @media (min-width:1200px) {
//        html {
//            font-size: $view-xl-font-size
//        }
//    }

    ////尺寸计算3////页面设置：div{$rem-column * 实际宽度 / 设计图宽度}
    //尺寸设置
//    html {
//        font-size: ceil($view-base / $rem-column);
//    }
//    @include sys-rem-loop3(200, $view-base, $rem-column);
}
//循环设置不同宽度的rem
@mixin sys-rem-loop($width : 200, $view-base : 640, $font-px-base : 40px){
    @while $width < $view-base + 1 {
        $widthpix : $width * 1px;
        @media (min-width: $widthpix) {
            html {
                font-size: ceil($font-px-base * $width / $view-base);
            }
        }
        $width : $width + $rem-loop-num;
    }
}

//循环设置不同宽度的rem
@mixin sys-rem-loop3($width : 200, $view-base : 640, $rem-column : 10){
    @while $width < $view-base + 1 {
        $widthpix : $width * 1px;
        @media (min-width: $widthpix) {
            html {
                font-size: ceil($width / $rem-column);
            }
        }
        $width : $width + $rem-loop-num;
    }
}

//自适应em配置
$em-font-size-px:1px * $rem-font-size-num;
$em-font-base:1em * $rem-font-size-num;
@mixin sys-em-set($view-base: 640, $class:ems){//默认设计图尺寸宽度
    $font-px-base:1px * $rem-font-size-num;
    ////尺寸计算1////
    //尺寸设置
    .#{$class} {
        font-size: ceil($font-px-base * $view-base / $view-base);
    }
    @include sys-em-loop(200, $view-base, $font-px-base, $class);

    ////尺寸计算2////
    //(min-width:200px)
//    $view-xxs-font-size:ceil($font-px-base * 200 / $view-base);
//    //(min-width:320px)
//    $view-xs-font-size:ceil($font-px-base * 320 / $view-base);
//    //(min-width:480px)
//    $view-sm-font-size:ceil($font-px-base * 480 / $view-base);
//    //(min-width:640)
//    $view-ms-font-size:ceil($font-px-base * 640 / $view-base);
//    //(min-width:720)
//    $view-md-font-size:ceil($font-px-base * 720 / $view-base);
//    //(min-width:980)
//    $view-lg-font-size:ceil($font-px-base * 980 / $view-base);
//    //(min-width:1200)
//    $view-xl-font-size:ceil($font-px-base * 1200 / $view-base);
//    //尺寸设置
//    .#{$class} {
//        font-size: $view-ms-font-size;
//    }
//    @media (min-width: 200px) {
//        .#{$class} {
//            font-size: $view-xxs-font-size
//        }
//    }
//    @media (min-width: 320px) {
//        .#{$class} {
//            font-size: $view-xs-font-size
//        }
//    }
//    @media (min-width: 480px) {
//        .#{$class} {
//            font-size: $view-sm-font-size;
//        }
//    }
//    @media (min-width: 640px) {
//        .#{$class} {
//            font-size: $view-ms-font-size
//        }
//    }
//    @media (min-width: 720px) {
//        .#{$class} {
//            font-size: $view-md-font-size
//        }
//    }
//    @media (min-width:980px) {
//        .#{$class} {
//            font-size: $view-lg-font-size
//        }
//    }
//    @media (min-width:1200px) {
//        .#{$class} {
//            font-size: $view-xl-font-size
//        }
//    }
}
//循环设置不同宽度的em
@mixin sys-em-loop($width : 200, $view-base : 640, $font-px-base : 40px, $class : 'ems'){
    @while $width < $view-base + 1 {
        $widthpix : $width * 1px;
        @media (min-width: $widthpix) {
            .#{$class} {
                font-size: ceil($font-px-base * $width / $view-base);
            }
        }
        $width : $width + $rem-loop-num;
    }
}

////自适应代码函数////
//$sys-media-rule-flag:1;
@mixin sys-media-rules($flag:$sys-media-rule-flag){
    @if $flag == 1 {
        @content;
    }
}

////兼容代码函数////
//pc端兼容
//$sys-pc-compatible-rule-flag:1;
@mixin sys-pc-compatible-rules($flag:$sys-pc-compatible-rule-flag){
    @if $flag == 1 {
        @content;
    }
}

//移动端兼容
//$sys-mobile-compatible-rule-flag:1;
@mixin sys-mobile-compatible-rules($flag:$sys-mobile-compatible-rule-flag){
    @if $flag == 1 {
        @content;
    }
}

//通用兼容
//$sys-compatible-rule-flag:1;
@mixin sys-compatible-rules($flag:$sys-compatible-rule-flag){
    @if $flag == 1 {
        @content;
    }
}

////ie8及以下兼容
//$sys-compatible-ie8-rule-flag:1;
@mixin sys-compatible-ie8-rules($flag:$sys-compatible-ie8-rule-flag){
    @if $flag == 1 {
        @content;
    }
}

////ie7及以下兼容
//$sys-compatible-ie7-rule-flag:1;
@mixin sys-compatible-ie7-rules($flag:$sys-compatible-ie7-rule-flag){
    @if $flag == 1 {
        @content;
    }
}

////百分号继承
//%name{
//    &:hover,&:active{
//        color:$color-ao;
//    }
//}
//.name{
//    @extend %name
//}

//引入第三方函数
@import "_grid-framework";