Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created January 13, 2012 17:37
Show Gist options
  • Save mirisuzanne/1607696 to your computer and use it in GitHub Desktop.
Save mirisuzanne/1607696 to your computer and use it in GitHub Desktop.
A Keyframes Mixin (Sass only)
@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
100% { background-color: #ccffff; } }
@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
100% { background-color: #ccffff; } }
@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
100% { background-color: #ccffff; } }
@keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
100% { background-color: #ccffff; } }
/*
Syntax error: Invalid CSS after "...bkit-keyframes ": expected "}", was "#{$name} {"
// keyframes mixin
=keyframes($name)
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@keyframes #{$name}
@content
// use of keyframes mixin
+keyframes(bgcolor)
0%
background-color: #ffccf2
50%
background-color: #ccffcc
100%
background-color: #ccffff
// keyframes mixin
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
// use of keyframes mixin
@include keyframes(bgcolor) {
0% {
background-color: #ffccf2;
}
50% {
background-color: #ccffcc;
}
100% {
background-color: #ccffff;
}
}
@helphop
Copy link

helphop commented Mar 31, 2021

Thank you @meninomiel I needed that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment