Sass loop

Developer

Size

2,652 Kb

Views

26,312

Sass loop Previews
Sass loop HTML Codes
Sass loop CSS Codes

How do I make an sass loop?

Failed at the #ccc this weekend, but whatever I'll just leave this here and try again next week. Too much work right know. I can't think :-/. What is a sass loop? How do you make a sass loop? This script and codes were developed by Andreas Neeven on 18 September 2022, Sunday.

Sass loop Previews

Sass loop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sass loop</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="circle circle-1"></div>	<div class="circle circle-2"></div>	<div class="circle circle-3"></div>	<div class="circle circle-4"></div>	<div class="circle circle-5"></div>	<div class="circle circle-6"></div>	<div class="circle circle-7"></div>	<div class="circle circle-8"></div>	<div class="circle circle-9"></div>	<div class="circle circle-10"></div>	<div class="circle circle-11"></div>	<div class="circle circle-12"></div>	<div class="circle circle-13"></div>	<div class="circle circle-14"></div>	<div class="circle circle-15"></div>	<div class="circle circle-16"></div>	<div class="circle circle-17"></div>	<div class="circle circle-18"></div>	<div class="circle circle-19"></div>	<div class="circle circle-20"></div>	<div class="circle circle-21"></div>	<div class="circle circle-22"></div>	<div class="circle circle-23"></div>	<div class="circle circle-24"></div>	<div class="circle circle-25"></div>	<div class="circle circle-26"></div>	<div class="circle circle-27"></div>	<div class="circle circle-28"></div>	<div class="circle circle-29"></div>	<div class="circle circle-30"></div>	<div class="circle circle-31"></div>	<div class="circle circle-32"></div>	<div class="circle circle-33"></div>	<div class="circle circle-34"></div>	<div class="circle circle-35"></div>	<div class="circle circle-36"></div>	<div class="circle circle-37"></div>	<div class="circle circle-38"></div>	<div class="circle circle-39"></div>	<div class="circle circle-40"></div>	<div class="circle circle-41"></div>	<div class="circle circle-42"></div>	<div class="circle circle-43"></div>	<div class="circle circle-44"></div>	<div class="circle circle-45"></div>	<div class="circle circle-46"></div>	<div class="circle circle-47"></div>	<div class="circle circle-48"></div>	<div class="circle circle-49"></div>	<div class="circle circle-50"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Sass loop - Script Codes CSS Codes

body { position: absolute; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #EFF59A;
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 500px;
}
.circle { width: 50px; height: 50px; background: #E39568; border-radius: 50%;
}
.circle-1 { -webkit-transform: scale(0.01); transform: scale(0.01);
}
.circle-2 { -webkit-transform: scale(0.02); transform: scale(0.02);
}
.circle-3 { -webkit-transform: scale(0.03); transform: scale(0.03);
}
.circle-4 { -webkit-transform: scale(0.04); transform: scale(0.04);
}
.circle-5 { -webkit-transform: scale(0.05); transform: scale(0.05);
}
.circle-6 { -webkit-transform: scale(0.06); transform: scale(0.06);
}
.circle-7 { -webkit-transform: scale(0.07); transform: scale(0.07);
}
.circle-8 { -webkit-transform: scale(0.08); transform: scale(0.08);
}
.circle-9 { -webkit-transform: scale(0.09); transform: scale(0.09);
}
.circle-10 { -webkit-transform: scale(0.1); transform: scale(0.1);
}
.circle-11 { -webkit-transform: scale(0.11); transform: scale(0.11);
}
.circle-12 { -webkit-transform: scale(0.12); transform: scale(0.12);
}
.circle-13 { -webkit-transform: scale(0.13); transform: scale(0.13);
}
.circle-14 { -webkit-transform: scale(0.14); transform: scale(0.14);
}
.circle-15 { -webkit-transform: scale(0.15); transform: scale(0.15);
}
.circle-16 { -webkit-transform: scale(0.16); transform: scale(0.16);
}
.circle-17 { -webkit-transform: scale(0.17); transform: scale(0.17);
}
.circle-18 { -webkit-transform: scale(0.18); transform: scale(0.18);
}
.circle-19 { -webkit-transform: scale(0.19); transform: scale(0.19);
}
.circle-20 { -webkit-transform: scale(0.2); transform: scale(0.2);
}
.circle-21 { -webkit-transform: scale(0.21); transform: scale(0.21);
}
.circle-22 { -webkit-transform: scale(0.22); transform: scale(0.22);
}
.circle-23 { -webkit-transform: scale(0.23); transform: scale(0.23);
}
.circle-24 { -webkit-transform: scale(0.24); transform: scale(0.24);
}
.circle-25 { -webkit-transform: scale(0.25); transform: scale(0.25);
}
.circle-26 { -webkit-transform: scale(0.26); transform: scale(0.26);
}
.circle-27 { -webkit-transform: scale(0.27); transform: scale(0.27);
}
.circle-28 { -webkit-transform: scale(0.28); transform: scale(0.28);
}
.circle-29 { -webkit-transform: scale(0.29); transform: scale(0.29);
}
.circle-30 { -webkit-transform: scale(0.3); transform: scale(0.3);
}
.circle-31 { -webkit-transform: scale(0.31); transform: scale(0.31);
}
.circle-32 { -webkit-transform: scale(0.32); transform: scale(0.32);
}
.circle-33 { -webkit-transform: scale(0.33); transform: scale(0.33);
}
.circle-34 { -webkit-transform: scale(0.34); transform: scale(0.34);
}
.circle-35 { -webkit-transform: scale(0.35); transform: scale(0.35);
}
.circle-36 { -webkit-transform: scale(0.36); transform: scale(0.36);
}
.circle-37 { -webkit-transform: scale(0.37); transform: scale(0.37);
}
.circle-38 { -webkit-transform: scale(0.38); transform: scale(0.38);
}
.circle-39 { -webkit-transform: scale(0.39); transform: scale(0.39);
}
.circle-40 { -webkit-transform: scale(0.4); transform: scale(0.4);
}
.circle-41 { -webkit-transform: scale(0.41); transform: scale(0.41);
}
.circle-42 { -webkit-transform: scale(0.42); transform: scale(0.42);
}
.circle-43 { -webkit-transform: scale(0.43); transform: scale(0.43);
}
.circle-44 { -webkit-transform: scale(0.44); transform: scale(0.44);
}
.circle-45 { -webkit-transform: scale(0.45); transform: scale(0.45);
}
.circle-46 { -webkit-transform: scale(0.46); transform: scale(0.46);
}
.circle-47 { -webkit-transform: scale(0.47); transform: scale(0.47);
}
.circle-48 { -webkit-transform: scale(0.48); transform: scale(0.48);
}
.circle-49 { -webkit-transform: scale(0.49); transform: scale(0.49);
}
.circle-50 { -webkit-transform: scale(0.5); transform: scale(0.5);
}

Home Page	Home
Developer	Andreas Neeven
Username	aneeven
Uploaded	September 18, 2022
Rating	3
Size	2,652 Kb
Views	26,312

Do you need developer help for Sass loop?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andreas Neeven (aneeven) Script Codes

Name	Size
Flexbox Demo	2,648 Kb
Flexbox Order	2,117 Kb
Yay for blend-modes	2,443 Kb
Some card animation	2,518 Kb
Neon Hexagons SVG Image-Fill	2,928 Kb
Digital Sucks	2,769 Kb
Yet another card...	3,819 Kb
SVG Heart Animation	2,753 Kb
Spinning Loader	10,644 Kb
Flexbox align	2,098 Kb

Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Colorful Sliders	Chanrith	1,246 Kb
Animate elements with fixed gradient	Badabam	4,406 Kb
Retina canvas w. resize	Erikterwan	1,882 Kb
Contact	GanNichiHa	2,514 Kb
Slides-07-1 POSITION	Exhtml	1,909 Kb
Bootstrap Carousel Fade Transition	Rowno	2,484 Kb
ECharts Version 3.0 - Bar Marker Chart	WebCodePro	2,726 Kb
Alter bg opacity on hover...	Chrisboon27	2,054 Kb
A form arranged using automatic placement.	Vikasford	2,103 Kb
CSS background-size - GSAP	Jonathan	2,209 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!