Hi guys,
In this tutorial,
we are going to use for loop at our pug, scss preprocessor.

PUG/JADE (HTML preprocessor)

.wrapper 
 - for(var i = 0; i < 21; i++)
   span

and

SCSS (CSS preprocessor)

body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  @mixin j-center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @include j-center;
  .wrapper{
    $s: 40vmin;
    width: $s;
    height: $s;

    position: relative;
    span{
      display: block;
      width: inherit;
      height: inherit;
      position: absolute;
      top: 0;
      left: 0;
    //  border: solid red;

      @for $i from 1 through 22{
        &:nth-child(#{$i}){
          transform: rotate(calc(#{$i} * 20deg));

          animation: 2s linear animate infinite;
      opacity: 0;
      @keyframes animate{
        0%{
          opacity: 0;
        }
        100%{
          opacity: 1;
        }
      }
          animation-delay: #{$i * .1}s;
          &:not(:last-child)::after{
            content: '';
            $s: 10px;
            width: $s;
            height: $s;
            position: absolute;
            background: red;
            border-radius: 50%;
          }


        }
        &:last-child{
          animation: 2s linear lastchild infinite!important;
          opacity: 1!important;
          @keyframes lastchild{
            0%{
              transform: rotate(0deg) scale(1.1);
            }
            100%{
              transform: rotate(360deg) scale(1.1);
            }
          }
          &::after{
            content: '\f072';
            $s: 20px;
            width: $s;
            height: $s;
            position: absolute;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: #555;
            transform: scale(2)
          }
          }
        }
    }
  }
}

and here is our codepen testing code.

In the previous tutorial we have learned something about for loop pug, scss, and after we learn the basics we will apply those effect our basic tutorial.

Here is the for loop pug, scss tutorial https://dev.to/nikhilroy2/for-loop-developer-how-to-use-pug-jade-scss-javascript-python-backend-stack-tutorial-1-3h3p
Thanks all.

Blog

How to PUG, SCSS loading with for loop

Nikhil Chandra Roy

PUG/JADE (HTML preprocessor)

SCSS (CSS preprocessor)

Join Our Newsletter. No Spam, Only the good stuff.

Related