Not able to use a variable in sass

$sync: 1;
  animation: 
    ani 2s $sync,
    end 1s 2s 1;

Whenever I replace $sync (after ani 2s) it works.
How can i use variable here

You need to provide a bit more of the code, because it’s extremely difficult to see what this is supposed to be. SASS syntax is kinda wierd and difficult to read at the best of times (|'d guess the reason SASS is very rarely used is mainly because of this :man_shrugging: ), need more than this tiny fragment. It’s possibly an indentation issue, but can’t tell at the minute.

.scene
{
  width:100px;
  height:100px;
  perspective:300px;
  border:1px solid grey;
}
.cube
{
  position:relative;
  width:100%;
  height:100%;
  background-color:red;
  opacity:0.5;
  
  animation: 
    ani 2s 1,
    end 1s 2s 1;
}
@keyframes end
{
  50%
  {
    transform:rotateY(45deg);
  }
  100%
  {
    transform:rotateY(0deg);
  }
}
@keyframes ani
{
  0%
  {
    transform:rotateY(0deg);
  }
  25%
  {
    transform:rotateY(90deg);
  }
  50%
  {
    transform:rotateY(180deg);
  }
  75%
  {
    transform:rotateY(270deg);
  }
  100%
  {
    transform:rotateY(360deg);
  }
}
<div class="scene">
<div class="cube">
  <div class="cube_face front-face"></div>
  </div>
</div>

Ah, it’s scss syntax, not sass. So you want the first animation to run for 2 seconds, once, and then you want the second animation to run for 1 second, delayed for 2 seconds, once? I assume it’s an interpolation issue, ie that you need to interpolate the variable, try

ani 2s #{$sync}

I know that’s what you need to do to use calc, I assume it’s the same for other things

$sync:1;
  animation: 
    ani 2s #{$sync},
    end 1s 2s 1;

It is not working