Skip to content

Instantly share code, notes, and snippets.

@francisrupert
Forked from chriseppstein/0_usage.scss
Created June 18, 2013 15:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save francisrupert/5806149 to your computer and use it in GitHub Desktop.
Save francisrupert/5806149 to your computer and use it in GitHub Desktop.
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
}
@-moz-keyframes appear-and-roundify { 0% { opacity: 0; -moz-border-radius: 2px; border-radius: 2px; }
100% { opacity: 1; -moz-border-radius: 10px; border-radius: 10px; } }
@-webkit-keyframes appear-and-roundify { 0% { opacity: 0; -webkit-border-radius: 2px; border-radius: 2px; }
100% { opacity: 1; -webkit-border-radius: 10px; border-radius: 10px; } }
@-o-keyframes appear-and-roundify { 0% { opacity: 0; -o-border-radius: 2px; border-radius: 2px; }
100% { opacity: 1; -o-border-radius: 10px; border-radius: 10px; } }
@-ms-keyframes appear-and-roundify { 0% { opacity: 0; -ms-border-radius: 2px; border-radius: 2px; }
100% { opacity: 1; -ms-border-radius: 10px; border-radius: 10px; } }
@keyframes appear-and-roundify { 0% { opacity: 0; border-radius: 2px; }
100% { opacity: 1; border-radius: 10px; } }
@mixin keyframes($name,
$moz: $experimental-support-for-mozilla,
$webkit: $experimental-support-for-webkit,
$o: $experimental-support-for-opera,
$ms: $experimental-support-for-microsoft,
$khtml: $experimental-support-for-khtml,
$official: true)
{
@if $moz {
@include with-only-support-for($moz: true) {
@-moz-keyframes #{$name} { @content; }
}
}
@if $webkit {
@include with-only-support-for($webkit: true) {
@-webkit-keyframes #{$name} { @content; }
}
}
@if $o {
@include with-only-support-for($o: true) {
@-o-keyframes #{$name} { @content; }
}
}
@if $ms {
@include with-only-support-for($ms: true) {
@-ms-keyframes #{$name} { @content; }
}
}
@if $khtml {
@include with-only-support-for($khtml: true) {
@-khtml-keyframes #{$name} { @content; }
}
}
@if $official {
@include with-only-support-for {
@keyframes #{$name} { @content; }
}
}
}
@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
$experimental-support-for-mozilla: $moz;
$experimental-support-for-webkit: $webkit;
$experimental-support-for-microsoft: $ms;
$experimental-support-for-opera: $o;
$experimental-support-for-khtml: $khtml;
}
@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
// Capture the current state
$original-moz: $experimental-support-for-mozilla;
$original-webkit: $experimental-support-for-webkit;
$original-o: $experimental-support-for-opera;
$original-ms: $experimental-support-for-microsoft;
$original-khtml: $experimental-support-for-khtml;
@include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
@content;
@include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment