Using "for" loop & Creating a ringing effect with Sass-scss

omersurer(65)

Published in

#utopian-io

Words

649

Reading

3 min

Listen

Play

Repository

https://github.com/sass/sass

What Will I Learn?

You will learn how to code deeply with programing skills.
You will learn how to use forloops to define multiple codes.
You will learn from <start> through <end> way in for loops.
You will learn how to calculate the steps and get it with percentage as result.
You will learn how to define a random number inside of code block.
You will learn how to use skew function to let objects shake (play).
You will learn how sass translates for loop into css.
You will learn also nesting coding.

Requirements

Any text editor. (Brackets, Atom, Notepad++)
Basic HTML knowledge
Basic SCSS code knowledge
SASS installed.
Local server (Wampserver)
Any browser

Resources

Difficulty

Intermediate

Description

In this tutorial we will create a box with different color tabs in it and with hover function we will change its color. We will do the same thing also with images. If you follow this tutorial download all files from my github page and change the values. You can use comment mark(/*between these marks*/) to deactivate codes and test it. With this way it will be more useful for you and you can test and understand the codes better.

1- Before you start be sure that you run our sass code in the directory of site files. Our command is sass --watch sass:css. It will translate all codes that you write in scss file to css file. After that, write a basic html file on root directory and into body section 1 division with a class and 2 images in this division with deifferent classes. We need two PNGs with transparent backgroud for our effect..

2- On our scss file we are setting a background color to our body. After that we style our h1 tag, Its our text. After that we are positioning our mainbox division.

3- After all these we position 2 PNGs also and we create them animations with different names. That is because the speed of our move effect will be different between phone and headset.

4- Here is our main part of this tutorial. what we are doing is defining the moves for our animations. But in Sass we are using some loops to define it easy. Here we use for loop and we tell it to choose steps and for each step write the code as result.

5- We are doing the same with our second animation. Only different thing here is our random value. As you know with this way phone will move less than headset.

6- Here is the translated sass codes into css. Our for loop has created all there rules. Instead of 40 rules we just defined them with for loop. Try to compare these two files and understand the for loop better.