Interpolation of prefixes on @keyframes in Sass

by

This simply isn’t possible using variable interpolation. You can get around the @ assignment like this:

$at: unquote("@"); // either of these will work
$amp: #{"@"};

But then you end up with this error:

error sass/test.scss (Line 4: Invalid CSS after “”: expected selector_comma_sequence, was “@-ms-keyframes …”)

Interpolation on @keyframes is not currently supported, but will be in the future. You can track the progress of that on GitHub. In the mean time, you’ll have to write out your keyframe information by hand. A simple example looks like this:

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }

    @keyframes #{$name} {
        @content;
    }
}

Usage:

@include keyframes(foo) {
    0% {
        color: red;
    }

    100% {
        color: blue;
    }
}

A more complex example can be found in Eric Meyer’s Sass Animation library.

More Related Contents:

  1. To know the sass structure [closed]
  2. False positive “undefined variable” error when compiling SCSS
  3. Adding a unit to a number in Sass
  4. Using Sass Variables with CSS3 Media Queries
  5. Sass – Manipulate inherited property?
  6. Append the parent selector to the end with Sass
  7. Modifying the middle of a selector in Sass (adding/removing classes, etc.)
  8. Sass Interpolation of Mixin, Function, and Variable names
  9. Why does Sass change the format of my colors?
  10. Is Sass 3.3 compatible with Compass?
  11. How to overwrite SCSS variables when compiling to CSS
  12. Can I import an externally hosted file with sass?
  13. Using a function in Sass is returning the string containing the name of the function rather than the result
  14. Concatenating nested classes using SASS [duplicate]
  15. Math with interpolated variables?
  16. Define variables in Sass based on classes
  17. Sass calculate percent minus px
  18. Using variables for CSS properties in Sass
  19. Sass color variable not working inside darken()
  20. Skipping an optional argument in Sass mixin
  21. Can’t get sass + compass + susy installed due to version conflict
  22. Multiple values for one property with variable argument lists in Sass
  23. Adding two values in Sass function creates double instance of ‘px’
  24. Is it possible to reference a further parent than just the one above?
  25. Gulp TypeError: Arguments to path.join must be strings
  26. webpack (with sass-loader) – scss file @import does not recognize resolve alias
  27. SASS compile fontawesome preserve notation
  28. Trying to use sass modules in create-react-app with the new @use syntax but receiving an error
  29. Unexpected results when using @extend for themes
  30. Styling a specific set of input types in a reusable way with Sass

Leave a Comment