SASS Mixins
Written on November 16, 2016
Animations
@mixin keyframes($name) {
@-ms-keyframes #{$name} {
@content
}
@-o-keyframes #{$name} {
@content
}
@-moz-keyframes #{$name} {
@content
}
@-webkit-keyframes #{$name} {
@content
}
@keyframes #{$name} {
@content
}
}
@mixin animation($val) {
-ms-animation: $val;
-o-animation: $val;
-webkit-animation: $val;
-moz-animation: $val;
animation: $val;
}
Example
@include animation((
delay: .8s,
duration: 1.6s,
iteration-count: 1,
name: fadeFromHilite,
fill-mode: forwards
));
@include keyframes(fadeFromHilite) {
0% { background: red }
100% { background: #fff; }
}
Backgrounds
@mixin background($args) {
@each $prop,$val in $args {
background-#{$prop}: $val;
}
}
Example
.element {
@include background((
color: red,
position: center,
size: contain,
image: url("file.jpg")
));
}
General Vendor Prefixing
@mixin prefix($args) {
@each $prop,$val in $args {
-ms-#{$prop}: $val;
-o-#{$prop}: $val;
-webkit-#{$prop}: $val;
-moz-#{$prop}: $val;
#{$prop}: $val;
}
}
Example
.element {
@include prefix((filter: blur(2px)));
}