DEV Community

Nikhil Chandra Roy
Nikhil Chandra Roy

Posted on

How to PUG, SCSS loading with for loop

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 
Enter fullscreen mode Exit fullscreen mode

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)
          }
          }
        }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)