@charset "UTF-8"; $vari : 750 / 640; @function px2rem($size){ @return $size / 20 / 2 / $vari + rem; } @function -px2rem($size){ @return - $size / 20 / 2 / $vari + rem; } @mixin reset{ margin: 0; padding: 0; } @mixin inline-block{ display: inline-block; *display: inline; *zoom: 1; } @mixin clearfix{ *zoom: 1; &:before, &:after{ content: ""; display: table; line-height: 0; } &:after{ clear: both; } } /* 弹性盒子webkit-box */ @mixin webkitbox( $type : 1 ){ display: -webkit-box; @if $type == 1{ -webkit-box-orient: horizontal; }//水平 @if $type == 2{ -webkit-box-orient: vertical; }//垂直 } @mixin flex($flex){//设置盒子大小 -webkit-box-flex: $flex; } @mixin size($value) { width: $value; height: $value; } @mixin size($width, $height) { width: $width; height: $height; } @mixin hide-text{ text-indent: 100%; white-space: nowrap; overflow: hidden; } @mixin break { -ms-word-break: break-all; word-break: break-all; word-break: break-word; } /* 文字溢出 */ @mixin ellipsis { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } @mixin pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } @mixin wrap { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } // http://www.hicss.net/solve-change-line-in-css/ @mixin nowrap { white-space: nowrap; word-break: keep-all; } @mixin opacity($opacity) { opacity: $opacity; filter: alpha(opacity=#{$opacity * 100}); } @mixin min-height($height) { min-height: $height; height: auto !important; _height: $height; } /* 旋转 */ @mixin rotate($value:180deg){ -webkit-transform: rotate($value); -moz-transform: rotate($value); -ms-transform: rotate($value); transform: rotate($value); } /* css角标 */ @mixin u-arrow-left($value:6px,$bordercolor:#fff){ border-width: $value; border-color: transparent $bordercolor transparent transparent; border-style: solid; } // Gradients 添加渐变过渡函数,20140110 add by petsa @mixin gradient($color-form, $color-to) { background: $color-form; // Old browsers background: -moz-linear-gradient(top, $color-form 0%, $color-to 100%); // FF3.6+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-form), color-stop(100%,$color-to)); // Chrome,Safari4+ background: -webkit-linear-gradient(top, $color-form 0%, $color-to 100%); // Chrome10+,Safari5.1+ background: -o-linear-gradient(top, $color-form 0%, $color-to 100%); // Opera 11.10+ background: -ms-linear-gradient(top, $color-form 0%, $color-to 100%); // IE10+ background: linear-gradient(to bottom, $color-form 0%, $color-to 100%); // W3C filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); // IE6-9 } //三角朝上 @mixin triangle-up($width,$color){ width: 0; height: 0; border: $width solid $color; border-color: transparent transparent $color; } //三角朝下 @mixin triangle-down($width,$color){ width: 0; height: 0; border: $width solid $color; border-color: $color transparent transparent; } //三角朝左 @mixin triangle-left($width,$color){ width: 0; height: 0; border: $width solid $color; border-color: transparent $color transparent transparent; } //三角朝右 @mixin triangle-right($width,$color){ width: 0; height: 0; border: $width solid $color; border-color: transparent transparent transparent $color; } //左上三角形 @mixin triangle-topleft($width,$color){ width: 0; height: 0; border: $width solid $color; border-color: $color transparent transparent $color; } //右上三角形 @mixin triangle-topright($width,$color){ width: 0; height: 0; border: $width solid $color; border-color: $color $color transparent transparent; } //左下三角形 @mixin triangle-bottomleft($width,$color){ width: 0; height: 0; border: $width solid $color; border-color: transparent transparent $color $color; } //右下三角形 @mixin triangle-bottomright($width,$color){ width: 0; height: 0; border: $width solid $color; border-color: transparent $color $color transparent; }