79

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.

daviestar
  • 4,531
  • 3
  • 29
  • 47
  • By the way, what's the different between SASS and SCSS? Is not `.scss` the extension format of SASS files? – Mohammad Kermani Aug 05 '17 at 06:43
  • 1
    @M98 Check out the code examples [on the sass site](http://sass-lang.com/guide). 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. – daviestar Aug 05 '17 at 11:00
  • hint: I turn to [https://jsonformatter.org/scss-to-sass] when I need to find the corresponding sass syntax of something I do know in scss. – Frank N Nov 24 '20 at 13:12

2 Answers2

123

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)
daviestar
  • 4,531
  • 3
  • 29
  • 47
  • 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. – Tarun Dec 28 '16 at 06:51
  • @daviestar 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](https://www.npmjs.com/package/gulp-autoprefixer). – vcoppolecchia Aug 24 '17 at 10:46
  • true dat @vcoppolecchia – daviestar Aug 24 '17 at 12:36
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.

Kalnode
  • 9,386
  • 3
  • 34
  • 62
KrystianKasp98
  • 31
  • 3