@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin transition($transition...) {
-moz-transition: $transition;
-o-transition: $transition;
-ms-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition-delay($delay...) {
-moz-transition-delay: $delay;
-o-transition-delay: $delay;
-webkit-transition-delay: $delay;
transition-delay:$delay;
}
@mixin transform-origin ($origin...) {
-moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
@mixin border-radius($radius...) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow:inset $top $left $blur $color;
-moz-box-shadow:inset $top $left $blur $color;
box-shadow:inset $top $left $blur $color;
} @else {
-webkit-box-shadow: $top $left $blur $color;
-moz-box-shadow: $top $left $blur $color;
box-shadow: $top $left $blur $color;
}
}
@mixin text-hide() {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin flexbox-order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation_name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
@mixin animation ($delay, $duration, $animation, $iteration, $direction: forward, $fillmode: fowards) {
-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
-webkit-animation-fill-mode: $fillmode;
-webkit-animation-direction: $direction;
-webkit-animation-iteration-count: $iteration;
animation-delay: $delay;
animation-duration: $duration;
animation-name: $animation;
animation-fill-mode: $fillmode;
animation-direction: $direction;
animation-iteration-count: $iteration;
}
@mixin gradient($from, $to) {
background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
background: -moz-linear-gradient(top, $from, $to);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}
//Usage
.mymixin {
@include transform(perspective(800px) rotate(-90deg));
@include transition(opacity 0.35s, transform 0.5s);
@include transition-delay(0.5s);
@include transform-origin (50% 0%);
@include box-shadow(0, 0, 15px, #000);
@include border-radius(10px 10px 10px 10px);
@include text-hide();
}
.mymixin-flex-box {
@include flexbox();
}
.mymixin-flex-item {
@include flex(1 200px);
@include flexbox-order(2);
}
.mymixin-animation {
@include keyframes(animation-slide-out-up) {
0% {
transform: translate(0,0);
}
100% {
transform: translate(0,-100%);
}
}
}
.mymixin-animation-slide-out-up{
@include animation(0, 0.5s, animation-slide-out-up, infinite, ease);
}
View Compiled