[Vuejs]-Apply dynamic styles using css/scss in vue

by

0👍

If you have unique id for each Card then it’s possible using SCSS use below SCSS function

    $totalDivs: 9;
    @for $i from 0 through $totalDivs {
    #organizationId#{$i} {
        animation-delay: #{$i * 1}s;
        -webkit-animation-delay: #{$i * 1}s;
      }
   }

SCSS output:

#organizationId0 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

#organizationId1 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

#organizationId2 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

#organizationId3 {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

#organizationId4 {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
}

#organizationId5 {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

#organizationId6 {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

#organizationId7 {
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
}

#organizationId8 {
  animation-delay: 8s;
  -webkit-animation-delay: 8s;
}

#organizationId9 {
  animation-delay: 9s;
  -webkit-animation-delay: 9s;
}

Leave a comment