原文链接:http://www.cnblogs.com/maplejan/p/3659830.html
主要修复3.4版本后变量作用域的问题。
代码如下:
/* easy-animation.scss */ // easy-animation
// Author: Maple Jan
// Date: 2016-10-21 // Support browser's private prefix.
$ea-prefix-for-webkit: true !default;
$ea-prefix-for-mozilla: true !default;
$ea-prefix-for-microsoft: true !default;
$ea-prefix-for-opera: true !default;
$ea-prefix-for-spec: true !default; // required for keyframe mixin // Disable all browser's private prefix.
@mixin ea-disable-prefix-for-all() {
$ea-prefix-for-webkit: false !global;
$ea-prefix-for-mozilla: false !global;
$ea-prefix-for-microsoft: false !global;
$ea-prefix-for-opera: false !global;
$ea-prefix-for-spec: false !global;
} // Example usage:
// @include ea-transition(all 2s ease 0s);
@mixin ea-transition($value, $prefixs: webkit moz ms o spec) {
@each $prefix in $prefixs {
@if $prefix == webkit {
@if $ea-prefix-for-webkit {
-webkit-transition: $value;
}
}
@else if $prefix == moz {
@if $ea-prefix-for-mozilla {
-moz-transition: $value;
}
}
@else if $prefix == ms {
@if $ea-prefix-for-microsoft {
-ms-transition: $value;
}
}
@else if $prefix == o {
@if $ea-prefix-for-opera {
-o-transition: $value;
}
}
@else if $prefix == spec {
@if $ea-prefix-for-spec {
transition: $value;
}
}
@else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
} // Example usage:
// @include ea-transform(scale(1));
@mixin ea-transform($value, $prefixs: webkit moz ms o spec) {
@each $prefix in $prefixs {
@if $prefix == webkit {
@if $ea-prefix-for-webkit {
-webkit-transform: $value;
}
}
@else if $prefix == moz {
@if $ea-prefix-for-mozilla {
-moz-transform: $value;
}
}
@else if $prefix == ms {
@if $ea-prefix-for-microsoft {
-ms-transform: $value;
}
}
@else if $prefix == o {
@if $ea-prefix-for-opera {
-o-transform: $value;
}
}
@else if $prefix == spec {
@if $ea-prefix-for-spec {
transform: $value;
}
}
@else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
} // Example usage:
// @include ea-animation(wrap_s0_p1, 2s, ease, 0s, infinite);
@mixin ea-animation($name, $duration, $function: ease, $delay: 0s, $count: infinite) {
-webkit-animation: $name $duration $function $delay $count;
-moz-animation: $name $duration $function $delay $count;
-ms-animation: $name $duration $function $delay $count;
-o-animation: $name $duration $function $delay $count;
animation: $name $duration $function $delay $count;
} // Example usage:
// @include ea-keyframes(wrap_s0_p1) {
// 0% {
// opacity:;
// @include ea-transform(scale(1));
// }
// 50% {
// opacity: 0.8;
// @include ea-transform(scale(0.8));
// }
// 100% {
// opacity:;
// @include ea-transform(scale(1));
// }
// }
@mixin ea-keyframes($name) {
$_ea-prefix-for-webkit: $ea-prefix-for-webkit;
$_ea-prefix-for-mozilla: $ea-prefix-for-mozilla;
$_ea-prefix-for-microsoft: $ea-prefix-for-microsoft;
$_ea-prefix-for-opera: $ea-prefix-for-opera;
$_ea-prefix-for-spec: $ea-prefix-for-spec; @if $_ea-prefix-for-webkit {
@include ea-disable-prefix-for-all();
$ea-prefix-for-webkit: true !global;
@-webkit-keyframes #{$name} {
@content;
}
}
@if $_ea-prefix-for-mozilla {
@include ea-disable-prefix-for-all();
$ea-prefix-for-mozilla: true !global;
@-moz-keyframes #{$name} {
@content;
}
}
@if $_ea-prefix-for-microsoft {
@include ea-disable-prefix-for-all();
$ea-prefix-for-microsoft: true !global;
@-ms-keyframes #{$name} {
@content;
}
}
@if $_ea-prefix-for-opera {
@include ea-disable-prefix-for-all();
$ea-prefix-for-opera: true !global;
@-o-keyframes #{$name} {
@content;
}
}
@if $_ea-prefix-for-spec {
@include ea-disable-prefix-for-all();
$ea-prefix-for-spec: true !global;
@keyframes #{$name} {
@content;
}
} $ea-prefix-for-webkit: $_ea-prefix-for-webkit !global;
$ea-prefix-for-mozilla: $_ea-prefix-for-mozilla !global;
$ea-prefix-for-microsoft: $_ea-prefix-for-microsoft !global;
$ea-prefix-for-opera: $_ea-prefix-for-opera !global;
$ea-prefix-for-spec: $_ea-prefix-for-spec !global;
}