SASS (not SCSS) syntax for css3 keyframe animation

Question

Is there any way to write keyframes in SASS?

Every example I have found is actually SCSS, even when it says it's SASS. To be clear, I mean the one with no curly brackets.

Fra

By the way, what's the different between SASS and SCSS? Is not .scss the extension format of SASS files? – Tarrant

@M98 Check out the code examples on the sass site. They released 2 syntaxes - Scss and Sass. Both have the same functionality but Sass is strict about indentation, allowing it to lose the curlies brackets and semi-colons. – Fra

hint: I turn to [jsonformatter.org/scss-to-sass] when I need to find the corresponding sass syntax of something I do know in scss. – Unexpressive

Answer 1

Here is how you implement css keyframes in the Sass syntax:

@keyframes name-of-animation
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

Here is a Sass mixin to add vendor prefixes:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

Here's how to use the mixin in Sass syntax:

+keyframes(name-of-animation)
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

Fra

can you provide for spin that transforms from 0 to 360 deg. It is very easy in css but it is getting very complicated in sass. – Tlingit

@Fra regarding the Sass mixin to add vendor prefixes: in my opinion is also a good idea to handle vendor prefixes with some sort of build tool (say Gulp or Grunt, for instance). A good one could be gulp-autoprefixer. – Cinquecento

true dat @Cinquecento – Fra

Answer 2

Create keyframes like so:

@keyframes name
  0%
    transform: scale(1)
  50%
    transform: scale(1.5)
  100%
    transform: scale(1)

then use

.example-btn
  animation: name 2s linear infinite

If you store keyframes in other .sass file, you just need import this file(with keyframes) and everything will work good.

Execrate