Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
956 lines (886 sloc) 30.9 KB
@charset "utf-8";
////
/// 兼容性封装,解决浏览器常用 css 兼容性问题
/// @author Clear, Molice, Zhoon, Kayo,Jeff
/// @group 兼容性封装
/// @date 2014-08-19
////
/// display: flex 的兼容性方法
///
/// @group 布局
/// @name flex
%flex {
display: -o-box;
display: -moz-box;
display: -webkit-box;
display: box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/// display: flex 的兼容性方法
///
/// @group 布局
/// @name display-flex
@mixin display-flex {
display: -o-box;
display: -moz-box;
display: -webkit-box;
display: box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/// flex 的兼容性方法
///
/// @group 布局
/// @name flexbox
/// @param {Number} $num - CSS flex 的属性值,即在父元素中的权重
@mixin flexbox($num) {
// 在移动端只支持 flexbox 协议(旧的 flex API)的浏览器下,只有当你设置了 display: flex 属性后,其子元素的 flex 才会生效,因此这里同时设置了 display 以及 box-flex 属性
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
-webkit-box-flex: $num;
-moz-box-flex: $num;
-o-box-flex: $num;
-ms-box-flex: $num;
-webkit-flex: $num;
-moz-flex: $num;
-o-flex: $num;
-ms-flex: $num;
flex: $num;
}
@mixin flex-direction-ForOld($direction) {
@if $direction == row { // old 版本还有 inline-axis | block-axis,暂不考虑
-webkit-box-orient:horizontal ;
-moz-box-orient:horizontal ;
box-orient:horizontal;
} @else if $direction == column {
-webkit-box-orient:vertical ;
-moz-box-orient:vertical ;
box-orient:vertical;
} @else if $direction == row-reverse{
-webkit-box-orient:horizontal ;
-moz-box-orient:horizontal ;
box-orient:horizontal;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction: reverse;
} @else{
-webkit-box-orient:vertical ;
-moz-box-orient:vertical ;
box-orient:vertical;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction: reverse;
}
}
/// 设置 flex 元素的伸缩流方向,即 box-orient 的兼容性方法
///
/// @group 布局
/// @name flex-direction
/// @param {String} $direction - 伸缩流方向,有 row,row-reverse,column,column-reverse 四个可选值
@mixin flex-direction($direction) {
@include flex-direction-ForOld($direction);
-ms-flex-direction:$direction;
-webkit-flex-direction:$direction;
flex-direction:$direction;
}
/// flex-grow 的兼容性方法
///
/// @group 布局
/// @name flex-grow
/// @param {Number} $num - CSS flex-grow 的属性值,即在父元素中的权重
@mixin flex-grow($num) {
-webkit-box-flex: $num;
-moz-box-flex: $num;
-o-box-flex: $num;
-ms-box-flex: $num;
-ms-flex: $num; // for IE10
-moz-box-flex-grow: $num;
-webkit-flex-grow: $num;
-ms-flex-grow: $num;
flex-grow: $num;
}
/// flex-shrink 的兼容性方法
///
/// @group 布局
/// @name flex-shrink
/// @param {Number} $num - CSS flex-shrink 的属性值
@mixin flex-shrink($num) {
-webkit-box-flex-shrink: $num;
-moz-box-flex-shrink: $num;
-webkit-flex-shrink: $num;
-ms-flex-shrink: $num;
flex-shrink: $num;
}
/// flex-basis 的兼容性方法
///
/// @group 布局
/// @name flex-basis
/// @param {Number} $num - CSS flex-basis 的属性值
@mixin flex-basis($num) {
-webkit-box-flex-basis: $num;
-moz-box-flex-basis: $num;
-webkit-flex-basis: $num;
-ms-flex-basis: $num;
flex-basis: $num;
}
/// align-items 的兼容性方法
///
/// @group 布局
/// @name flex-align-items
/// @param {String} $value - 对齐方式,有 flex-start,flex-end,center,baseline,stretch 5个可选值
@mixin flex-align-items($value) {
@if $value == 'flex-start' {
-webkit-box-align: start;
-moz-box-align: start;
-o-box-align: start;
-ms-box-align: start;
} @else if $value == 'flex-end' {
-webkit-box-align: end;
-moz-box-align: end;
-o-box-align: end;
-ms-box-align: end;
} @else {
-webkit-box-align: $value;
-moz-box-align: $value;
-o-box-align: $value;
-ms-box-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
-o-align-items: $value;
-ms-align-items: $value;
-ms-flex-align: $value; // for IE10
align-items: $value;
}
/// justify-content 的兼容性方法
///
/// @group 布局
/// @name flex-justify-content
/// @param {String} $value - CSS 属性 justify-content 的属性值,即 flex-start,flex-end,center,space-between,space-around 5个可选值
@mixin flex-justify-content($value) {
@if $value == 'space-around' {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: distribute;
} @else if $value == 'flex-start' {
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-flex-pack: start;
} @else if $value == 'flex-end' {
-webkit-box-pack: end;
-moz-box-pack: end;
-ms-flex-pack: end;
} @else {
-webkit-box-pack: $value;
-moz-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-ms-justify-content: $value;
-ms-flex-pack: $value; // for IE10
justify-content: $value;
}
/// 根据子元素的布局方向,控制其对齐方式
///
/// @group 布局
/// @name flex-childPos
/// @param {String} $dir - 子元素当前的布局方向,可选值为 vertical 和 horizontal
/// @param {String} $value - 希望子元素对齐的方式,可选值为 flex-start,flex-end,center
@mixin flex-childPos($dir, $value) {
@if $dir == 'vertical' {
@include flex-align-items($value);
}
@if $dir == 'horizontal' {
@include flex-justify-content($value);
}
}
/// box-sizing 的兼容性方法
///
/// @group 布局
/// @name box-sizing
/// @param {String} $value - CSS 属性 box-sizing 的属性值
/// @deprecated 由于浏览器的迭代更新,目前 box-sizing 已经得到非常广泛的支持,无需使用兼容封装,请使用原生的 CSS 属性 box-sizing 取代本方法。
@mixin box-sizing($value) {
-webkit-box-sizing: $value;
-moz-box-sizing: $value;
box-sizing: $value;
}
/// 清除浮动
///
/// @group 布局
/// @name clear
%clear {
@if not($function_mobileOnly) {
*zoom: 1;
}
&:after {
clear: both;
content: ".";
display: block;
line-height: 0;
font-size: 0;
visibility: hidden;
@if not($function_mobileOnly) {
overflow: hidden;
}
}
}
/// display: inline-block 的兼容性方法
///
/// @group 布局
/// @name inlineBlock
@mixin inlineBlock {
display: inline-block;
@if not($function_mobileOnly) {
*display: inline;
*zoom: 1;
}
}
/// box-shadow 的兼容性方法
///
/// @group 外观
/// @name box-shadow
/// @param {String} $value - CSS 属性 box-shadow 的属性值
/// @deprecated 由于浏览器的迭代更新,目前 box-shadow 已经得到非常广泛的支持,无需使用兼容封装,请使用原生的 CSS 属性 box-shadow 取代本方法。
@mixin box-shadow($value...) {
-webkit-box-shadow:$value;
-moz-box-shadow:$value;
box-shadow:$value;
}
/// 单行省略号
///
/// @group 外观
/// @name text-ellipsis
%text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
word-break:break-all;
//在IE9的<td>中,如果之前已经设置了word-wrap:break-word,则这里的white-space:nowrap会失效,所以要在这里加上word-wrap:normal来以防万一
word-wrap: normal;
}
%text_ellipsis {
@extend %text-ellipsis;
}
/// 多行省略号
///
/// @group 外观
/// @name text-multiLine-ellipsis
/// @param {Number} $line - 文字的行数
/// @param {Measure} $lineHeight - 文字行高
/// @throw 不支持多行省略的浏览器降级处理为结尾处没有省略号,直接裁剪掉。
@mixin text-multiLine-ellipsis($line: 2, $lineHeight: 20px){
line-height:$lineHeight;
overflow:hidden;
height: $lineHeight * $line;
display: -webkit-box;
display: -moz-box;
display: box;
text-overflow: ellipsis;
-webkit-line-clamp: $line;
-moz-line-clamp: $line;
line-clamp: $line;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
/// 在长单词或 URL 地址内部进行换行,适用于以中文为主混有英文的文字排版
///
/// @group 外观
/// @name text-breakWord
%text-breakWord {
word-wrap: break-word;
word-break: break-word;
}
%text_breakWord {
@extend %text-breakWord;
}
/// 透明度的浏览器兼容方法
///
/// @group 外观
/// @name opacity
/// @param {Number} $var - 不透明度
@mixin opacity($var) {
-webkit-opacity:$var;
-moz-opacity:$var;
opacity:$var;
filter:alpha(opacity=$var*100);
@if not($function_mobileOnly) {
-khtml-opacity:$var;
}
}
/// appearance 的浏览器兼容方法
///
/// @group 外观
/// @name appearance
/// @param {Number} $value - CSS 属性 appearance 的属性值
@mixin appearance($value) { // 暂不支持IE和Opera
-moz-appearance:$value;
-webkit-appearance:$value;
appearance:$value;
}
/// 选择内容的 CSS 选择器
///
/// @group 外观
/// @name selection
@mixin selection {
@at-root #{&}::selection {
@content;
}
@at-root #{&}::-moz-selection {
@content;
}
@at-root #{&}::-webkit-selection {
@content;
}
}
/// 半透明背景颜色
///
/// @group 外观
/// @name bgWithOpacity
/// @param {Color} $color - 背景色的颜色值
/// @param {Number} $alpha - 背景色的透明度
@mixin bgWithOpacity($color,$alpha) {
background-color:rgba($color,$alpha);
@include forIE8{
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#{ie-hex-str(rgba($color,$alpha))},endcolorstr=#{ie-hex-str(rgba($color,$alpha))});
}
}
/// 跨浏览器的渐变背景,垂直渐变,自上而下
///
/// @group 外观
/// @name gradient-vertical
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置,需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置,需要以百分号为单位
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%){
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($start-percent, $start-color), color-stop($end-percent, $end-color)); // Safari 4-5, Chrome 1-9
background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Firefox 3.6+
background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
/// 跨浏览器的渐变背景,水平渐变,自左而右
///
/// @group 外观
/// @name gradient-horizontal
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置,需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置,需要以百分号为单位
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%){
background-image: -webkit-gradient(linear, left center, right center, color-stop($start-percent, $start-color), color-stop($end-percent, $end-color));
background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+
background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Firefox 3.6+
background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
}
/// 跨浏览器的渐变背景,垂直渐变,自上而下,支持三个渐变点
///
/// @group 外观
/// @name gradient-vertical-threeColor
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $middle-color [#444] - 渐变的中间颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置,需要以百分号为单位
/// @param {Number} $start-percent [50%] - 渐变的中间位置,需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置,需要以百分号为单位
@mixin gradient-vertical-threeColor($start-color: #555, $middle-color: #444, $end-color: #333, $start-percent: 0%, $middle-percent: 50%, $end-percent: 100%){
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($start-percent, $start-color), color-stop($middle-percent, $middle-color), color-stop($end-percent, $end-color)); // Safari 4-5, Chrome 1-9
background-image: -webkit-linear-gradient(top, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -moz-linear-gradient(top, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent); // Firefox 3.6+
background-image: -o-linear-gradient(top, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent); // Opera 12
background-image: linear-gradient(to bottom, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
/// 跨浏览器的渐变背景,水平渐变,自左而右
///
/// @group 外观
/// @name gradient-horizontal-threeColor
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $middle-color [#444] - 渐变的中间颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置,需要以百分号为单位
/// @param {Number} $start-percent [50%] - 渐变的中间位置,需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置,需要以百分号为单位
@mixin gradient-horizontal-threeColor($start-color: #555, $middle-color: #444, $end-color: #333, $start-percent: 0%, $middle-percent: 50%, $end-percent: 100%){
background-image: -webkit-gradient(linear, left center, right center, color-stop($start-percent, $start-color), color-stop($middle-percent, $middle-color), color-stop($end-percent, $end-color));
background-image: -webkit-linear-gradient(left, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -moz-linear-gradient(left, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent); // Firefox 3.6+
background-image: -o-linear-gradient(left, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent); // Opera 12
background-image: linear-gradient(to right, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
}
/// user-select: none 的兼容性方法
///
/// @group 外观
/// @name disabledUserSelect
%disabledUserSelect {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/// CSS3 transform 的兼容性方法
///
/// @group 变形
/// @name transform
/// @param {String} $value - CSS 属性 transform 的属性值
@mixin transform($value) {
-o-transform:$value;
-moz-transform:$value;
-ms-transform:$value;
-webkit-transform:$value;
transform:$value;
}
/// CSS3 transform: scale 的兼容性方法
///
/// @group 变形
/// @name scale
/// @param {Number} $ratioX - X轴方向缩放的倍数,小数位缩小,大于1为放大
/// @param {Number} $ratioY [$ratioX 的值] - Y轴方向缩放的倍数,小数位缩小,大于1为放大
@mixin scale($ratioX, $ratioY: $ratioX) {
-webkit-transform: scale($ratioX, $ratioY);
-moz-transform: scale($ratioX, $ratioY);
-ms-transform: scale($ratioX, $ratioY); // IE9 only
-o-transform: scale($ratioX, $ratioY);
transform: scale($ratioX, $ratioY);
}
/// CSS3 transform: scale3d 的兼容性方法
///
/// @group 变形
/// @name scale3d
/// @param {Number} $ratioX - X轴方向缩放的倍数,小数位缩小,大于1为放大
/// @param {Number} $ratioY [$ratioX 的值] - Y轴方向缩放的倍数,小数位缩小,大于1为放大
/// @param {Number} $ratioZ [$ratioY 的值] - Z轴方向缩放的倍数,小数位缩小,大于1为放大
@mixin scale3d($ratioX, $ratioY: $ratioX, $ratioZ: $ratioY){
-webkit-transform: scale3d($ratioX, $ratioY, $ratioZ);
-moz-transform: scale3d($ratioX, $ratioY, $ratioZ);
-ms-transform: scale3d($ratioX, $ratioY, $ratioZ); // IE9 only
-o-transform: scale3d($ratioX, $ratioY, $ratioZ);
transform: scale3d($ratioX, $ratioY, $ratioZ);
}
/// CSS3 transform: scaleX 的兼容性方法
///
/// @group 变形
/// @name scaleX
/// @param {Number} $ratio - X轴方向缩放的倍数,小数位缩小,大于1为放大
@mixin scaleX($ratio){
-webkit-transform: scaleX($ratio);
-moz-transform: scaleX($ratio);
-ms-transform: scaleX($ratio); // IE9 only
-o-transform: scaleX($ratio);
transform: scaleX($ratio);
}
/// CSS3 transform: scaleY 的兼容性方法
///
/// @group 变形
/// @name scaleY
/// @param {Number} $ratio - Y轴方向缩放的倍数,小数位缩小,大于1为放大
@mixin scaleY($ratio){
-webkit-transform: scaleY($ratio);
-moz-transform: scaleY($ratio);
-ms-transform: scaleY($ratio); // IE9 only
-o-transform: scaleY($ratio);
transform: scaleY($ratio);
}
/// CSS3 transform: skew 的兼容性方法
///
/// @group 变形
/// @name skew
/// @param {Number} $x - X轴方向倾斜的角度
/// @param {Number} $y - X轴方向倾斜的角度
@mixin skew($x, $y){
-webkit-transform: skew($x, $y);
-moz-transform: skew($x, $y);
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
-o-transform: skew($x, $y);
transform: skew($x, $y);
}
/// CSS3 transform: translate 的兼容性方法
///
/// @group 变形
/// @name translate
/// @param {Number} $x - X轴方向平移的距离
/// @param {Number} $y - Y轴方向平移的距离
@mixin translate($x, $y){
-webkit-transform: translate($x, $y);
-moz-transform: translate($x, $y);
-ms-transform: translate($x, $y); // IE9 only
-o-transform: translate($x, $y);
transform: translate($x, $y);
}
/// CSS3 transform: translateX 的兼容性方法
///
/// @group 变形
/// @name translateX
/// @param {Number} $x - X轴方向平移的距离
@mixin translateX($x){
-webkit-transform: translateX($x);
-moz-transform: translateX($x);
-ms-transform: translateX($x); // IE9 only
-o-transform: translateX($x);
transform: translateX($x);
}
/// CSS3 transform: translateY 的兼容性方法
///
/// @group 变形
/// @name translateY
/// @param {Number} $y - Y轴方向平移的距离
@mixin translateY($y){
-webkit-transform: translateY($y);
-moz-transform: translateY($y);
-ms-transform: translateY($y); // IE9 only
-o-transform: translateY($y);
transform: translateY($y);
}
/// CSS3 transform: translate3d 的兼容性方法
///
/// @group 变形
/// @name translate3d
/// @param {Number} $x - X轴方向平移的距离
/// @param {Number} $y - Y轴方向平移的距离
/// @param {Number} $z - Z轴方向平移的距离
@mixin translate3d($x, $y, $z){
-webkit-transform: translate3d($x, $y, $z);
-moz-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}
/// CSS3 transform: rotate 的兼容性方法
///
/// @group 变形
/// @name rotate
/// @param {Number} $degrees - 元素旋转的角度
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees); // IE9 only
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
/// CSS3 transform: rotateX 的兼容性方法
///
/// @group 变形
/// @name rotateX
/// @param {Number} $degrees - 元素在X轴方向旋转的角度
@mixin rotateX($degrees) {
-webkit-transform: rotateX($degrees);
-moz-transform: rotateX($degrees);
-ms-transform: rotateX($degrees); // IE9 only
-o-transform: rotateX($degrees);
transform: rotateX($degrees);
}
/// CSS3 transform: rotateY 的兼容性方法
///
/// @group 变形
/// @name rotateY
/// @param {Number} $degrees - 元素在Y轴方向旋转的角度
@mixin rotateY($degrees) {
-webkit-transform: rotateY($degrees);
-moz-transform: rotateY($degrees);
-ms-transform: rotateY($degrees); // IE9 only
-o-transform: rotateY($degrees);
transform: rotateY($degrees);
}
/// CSS3 perspective 的兼容性方法
///
/// @group 变形
/// @name perspective
/// @param {Measure} $perspective - 观察者与 z=0 平面的距离
@mixin perspective($perspective) {
-webkit-perspective: $perspective;
-moz-perspective: $perspective;
perspective: $perspective;
}
/// CSS3 perspective-origin 的兼容性方法
///
/// @group 变形
/// @name perspective-origin
/// @param {Number} $origin - CSS 属性 perspective-origin 的属性值
@mixin perspective-origin($origin) {
-webkit-perspective-origin: $origin;
-moz-perspective-origin: $origin;
perspective-origin: $origin;
}
/// CSS3 transform-origin 的兼容性方法
///
/// @group 变形
/// @name transform-origin
/// @param {Number} $origin - CSS 属性 transform-origin 的属性值
@mixin transform-origin($origin) {
-webkit-transform-origin: $origin;
-moz-transform-origin: $origin;
-ms-transform-origin: $origin; // IE9 only
transform-origin: $origin;
}
/// CSS3 transition 的兼容性方法
///
/// @group 过渡效果
/// @name transition
/// @param {String} $transition - CSS 属性 transition 的属性值
@mixin transition($transition...) {
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
/// CSS3 transition-property 的兼容性方法
///
/// @group 过渡效果
/// @name transition-property
/// @param {String} $transition-property - CSS 属性 transition-property 的属性值
@mixin transition-property($transition-property...) {
-webkit-transition-property: $transition-property;
-moz-transition-property: $transition-property;
-o-transition-property: $transition-property;
transition-property: $transition-property;
}
/// CSS3 transition-delay 的兼容性方法
///
/// @group 过渡效果
/// @name transition-delay
/// @param {Number} $transition-delay - CSS 属性 transition-delay 的属性值
@mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay;
-moz-transition-delay: $transition-delay;
-o-transition-delay: $transition-delay;
transition-delay: $transition-delay;
}
/// CSS3 transition-duration 的兼容性方法
///
/// @group 过渡效果
/// @name transition-duration
/// @param {Number} $transition-duration - CSS 属性 transition-duration 的属性值
@mixin transition-duration($transition-duration...) {
-webkit-transition-duration: $transition-duration;
-moz-transition-duration: $transition-duration;
-o-transition-duration: $transition-duration;
transition-duration: $transition-duration;
}
/// CSS3 transition-timing-function 的兼容性方法
///
/// @group 过渡效果
/// @name transition-timing-function
/// @param {String} $timing-function - CSS 属性 transition-timing-function 的属性值
@mixin transition-timing-function($timing-function) {
-webkit-transition-timing-function: $timing-function;
-moz-transition-timing-function: $timing-function;
-o-transition-timing-function: $timing-function;
transition-timing-function: $timing-function;
}
/// CSS3 transition: transform 的兼容性方法,适用于需要在 transition 中使用 transform 属性的情况,会自动对应补全好这两个属性的前缀。
///
/// @group 过渡效果
/// @name transition-transform
/// @param {String} $transionWithoutProperty - CSS 属性 transition 中除了 transition-property 外的其他值
@mixin transition-transform($transionWithoutProperty...) {
-webkit-transition: -webkit-transform $transionWithoutProperty;
-moz-transition: -webkit-transform $transionWithoutProperty;
-o-transition: -o-transform $transionWithoutProperty;
transition: transform $transionWithoutProperty;
}
/// CSS3 animation 的兼容性方法
///
/// @group 动画
/// @name animation
/// @param {String} $animation - CSS 属性 animation 的属性值
@mixin animation($animation) {
-webkit-animation: $animation;
-moz-animation: $animation;
-o-animation: $animation;
animation: $animation;
}
/// CSS3 animation-name 的兼容性方法
///
/// @group 动画
/// @name animation
/// @param {String} $name - CSS 属性 animation-name 的属性值
@mixin animation-name($name) {
-webkit-animation-name: $name;
-moz-animation-name: $name;
-o-animation-name: $name;
animation-name: $name;
}
/// CSS3 animation-duration 的兼容性方法
///
/// @group 动画
/// @name animation-duration
/// @param {Number} $duration - CSS 属性 animation-duration 的属性值
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
-moz-animation-duration: $duration;
-o-animation-duration: $duration;
animation-duration: $duration;
}
/// CSS3 animation-timing-function 的兼容性方法
///
/// @group 动画
/// @name animation-timing-function
/// @param {Number} $timing-function - CSS 属性 animation-timing-function 的属性值
@mixin animation-timing-function($timing-function) {
-webkit-animation-timing-function: $timing-function;
-moz-animation-timing-function: $timing-function;
-o-animation-timing-function: $timing-function;
animation-timing-function: $timing-function;
}
/// CSS3 animation-delay 的兼容性方法
///
/// @group 动画
/// @name animation-delay
/// @param {Number} $delay - CSS 属性 animation-delay 的属性值
@mixin animation-delay($delay) {
-webkit-animation-delay: $delay;
-moz-animation-delay: $delay;
-o-animation-delay: $delay;
animation-delay: $delay;
}
/// CSS3 animation-iteration-count 的兼容性方法
///
/// @group 动画
/// @name animation-iteration-count
/// @param {Number} $iteration-count - CSS 属性 animation-iteration-count 的属性值
@mixin animation-iteration-count($iteration-count) {
-webkit-animation-iteration-count: $iteration-count;
-moz-animation-iteration-count: $iteration-count;
-o-animation-iteration-count: $iteration-count;
animation-iteration-count: $iteration-count;
}
/// CSS3 animation-direction 的兼容性方法
///
/// @group 动画
/// @name animation-direction
/// @param {String} $direction - CSS 属性 animation-direction 的属性值
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
-moz-animation-direction: $direction;
-o-animation-direction: $direction;
animation-direction: $direction;
}
/// CSS3 animation-fill-mode 的兼容性方法
///
/// @group 动画
/// @name animation-fill-mode
/// @param {String} $fill-mode - CSS 属性 animation-fill-mode 的属性值
@mixin animation-fill-mode($fill-mode) {
-webkit-animation-fill-mode: $fill-mode;
-moz-animation-fill-mode: $fill-mode;
-o-animation-fill-mode: $fill-mode;
animation-fill-mode: $fill-mode;
}
/// CSS3 keyframes 的兼容性方法
///
/// @group 动画
/// @name keyframes
/// @param {String} $name - 动画名
@mixin keyframes($name){
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-o-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
// modified by clearwu
// 封装keyframes作用不大,上面的写法不能根据前缀对应相应的内容。当然可以在内部做前缀的判断,但 sass v3.4.1 之后有修改日志:
// Don’t put rulesets inside @keyframes directives when bubbling them up to the top level.
// 以下例子可用于说明区别:(可自行用不同版本sass测试,也可线上测试:http://sassmeister.com/)
// @mixin keyframes($animationName) {
// @-webkit-keyframes #{$animationName} {
// $browser: '-webkit-'; @content;
// }
// @-moz-keyframes #{$animationName} {
// $browser: '-moz-'; @content;
// }
// @-o-keyframes #{$animationName} {
// $browser: '-o-'; @content;
// }
// @keyframes #{$animationName} {
// $browser: ''; @content;
// }
// }
// $browser: null;
// @include keyframes('rotate') {
// from { #{$browser}transform: rotate(0deg);}
// to { #{$browser}transform: rotate(360deg);}
// }
/// 适配多倍屏的 CSS 选择器
///
/// @group 设备适配
/// @name screenResolution
/// @param {Number} $num - 需要适配的屏幕倍数
@mixin screenResolution($num) {
@media (-webkit-min-device-pixel-ratio: $num),
(min--moz-device-pixel-ratio: $num),
(-o-min-device-pixel-ratio: $num),
(min-device-pixel-ratio: $num),
(min-resolution: #{$num}dppx),
(min-resolution: #{$num*96}dpi) {
@content;
}
}
/// 适配 Pad 的 CSS 选择器,例如有响应式布局中适配 Pad 的代码可以包在这里
///
/// @group 设备适配
/// @name screenForPad
@mixin screenForPad {
@media (min-width:$screen_width_pad) {
@content;
}
@media \0screen {
@content;
}
}
/// 适配手机的 CSS 选择器,与 screenForPad 方法对应,可以用于包裹只在 Phone 版使用的代码,不在 Pad 版使用的样式
///
/// @group 设备适配
/// @name screenForPhone
@mixin screenForPhone {
@media (max-width:$screen_width_pad) {
@content;
}
}
/// 适配 IE 10 及以上版本的 CSS 选择器,需要针对 IE10 或以上版本的样式可以写在这里
///
/// @group 设备适配
/// @name screenForIE10AndLater
@mixin screenForIE10AndLater {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@content;
}
}
/// 单独适配 IE 8 CSS 选择器,需要仅针对 IE 8 的样式可以写在这里
///
/// @group 设备适配
/// @name forIE8
@mixin forIE8 {
@media \0screen {
@content;
}
}
/// 单独适配 IE 9 CSS 选择器,需要仅针对 IE 9(不包括 IE 10 等更高版本) 的样式可以写在这里
///
/// @group 设备适配
/// @name forIE9
@mixin forIE9 {
@media all and (min-width:0\0) and (min-resolution: .001dpcm) {
@content;
}
}