forloops to define multiple codes.from <start> through <end> way in for loops.percentage as result.skew function to let objects shake (play).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.
7- And finally our end work...
https://github.com/omersurer/Sass-Scss-Tutorials/tree/master/Ringing_with_For_Loop
