Skip to content

Instantly share code, notes, and snippets.

@abods
Created March 14, 2015 14:54
Show Gist options
  • Save abods/ae2afec6fbecd8fe01e8 to your computer and use it in GitHub Desktop.
Save abods/ae2afec6fbecd8fe01e8 to your computer and use it in GitHub Desktop.
scss mixins
@mixin transition($transition-property, $transition-time, $method) {
-webkit-transition: $transition-property $transition-time $method;
-moz-transition: $transition-property $transition-time $method;
-ms-transition: $transition-property $transition-time $method;
-o-transition: $transition-property $transition-time $method;
transition: $transition-property $transition-time $method;
}
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin transform-origin($x,$y){
-moz-transform-origin: $x $y;
-o-transform-origin: $x $y;
-ms-transform-origin: $x $y;
-webkit-transform-origin: $x $y;
transform-origin: $x $y;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
@mixin break($point) {
@if $point == l {
@media (max-width: 1824px) { @content; }
}
@else if $point == m {
@media (max-width: 1024px) { @content; }
}
@else if $point == s {
@media (max-width: 480px) { @content; }
}
}
@mixin animation ($delay, $duration, $animation,$timing,$count,$direction:normal) {
-webkit-animation-delay: $delay;-webkit-animation-duration: $duration;-webkit-animation-name: $animation;-webkit-animation-timing-function: $timing;-webkit-animation-iteration-count: $count;-webkit-animation-direction:$direction;-webkit-animation-fill-mode: forwards;
-moz-animation-delay: $delay;-moz-animation-duration: $duration;-moz-animation-name: $animation;-moz-animation-timing-function: $timing;-moz-animation-iteration-count: $count;-moz-animation-direction:$direction;-moz-animation-fill-mode: forwards;
-o-animation-delay: $delay;-o-animation-duration: $duration;-o-animation-name: $animation;-o-animation-timing-function: $timing;-o-animation-iteration-count: $count;-o-animation-direction:$direction;-o-animation-fill-mode: forwards;
-ms-animation-delay: $delay;-ms-animation-duration: $duration;-ms-animation-name: $animation;-ms-animation-timing-function: $timing;-ms-animation-iteration-count: $count;-ms-animation-direction:$direction;-ms-animation-fill-mode: forwards;
animation-delay: $delay;animation-duration: $duration;animation-name: $animation;animation-timing-function: $timing;animation-iteration-count: $count;animation-iteration-direction:$direction;animation-fill-mode: forwards;
}
@mixin keyframe ($animation_name) {
@-webkit-keyframes #{$animation_name} { @content; }
@-moz-keyframes #{$animation_name} { @content; }
@-o-keyframes #{$animation_name} { @content; }
@-ms-keyframes #{$animation_name} { @content; }
@keyframes #{$animation_name} { @content; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment