Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
@function random-decimal($val) {
$decimal: random(10) * 0.1;
@return $decimal;
}
@mixin random-rgba($attr, $color: 255, $alpha: 10) {
#{$attr}: rgba(random($color), random($color), random($color), random($alpha))
}
.bar {
width: 30px;
display: inline-block;
}
@for $i from 1 through 30 {
.bar {
&:nth-child(#{$i}) {
height: random(300) + px;
@include random-rgba(background-color)
}
}
}
.bar {
width: 30px;
display: inline-block;
}
.bar:nth-child(1) {
height: 288px;
background-color: #c972c8;
}
.bar:nth-child(2) {
height: 238px;
background-color: #f13bd4;
}
.bar:nth-child(3) {
height: 281px;
background-color: #181c3d;
}
.bar:nth-child(4) {
height: 157px;
background-color: #55a256;
}
.bar:nth-child(5) {
height: 68px;
background-color: #a4aff7;
}
.bar:nth-child(6) {
height: 106px;
background-color: #56143d;
}
.bar:nth-child(7) {
height: 236px;
background-color: #a1fc09;
}
.bar:nth-child(8) {
height: 10px;
background-color: #a21af4;
}
.bar:nth-child(9) {
height: 25px;
background-color: #86e390;
}
.bar:nth-child(10) {
height: 153px;
background-color: #5bbd23;
}
.bar:nth-child(11) {
height: 88px;
background-color: #f61e91;
}
.bar:nth-child(12) {
height: 206px;
background-color: #c3b151;
}
.bar:nth-child(13) {
height: 76px;
background-color: #dce4b3;
}
.bar:nth-child(14) {
height: 139px;
background-color: #189bdb;
}
.bar:nth-child(15) {
height: 141px;
background-color: #895440;
}
.bar:nth-child(16) {
height: 296px;
background-color: #8c6eef;
}
.bar:nth-child(17) {
height: 280px;
background-color: #2b2f45;
}
.bar:nth-child(18) {
height: 231px;
background-color: #ae33cf;
}
.bar:nth-child(19) {
height: 133px;
background-color: #b26b66;
}
.bar:nth-child(20) {
height: 209px;
background-color: #b44d8c;
}
.bar:nth-child(21) {
height: 145px;
background-color: #240fe7;
}
.bar:nth-child(22) {
height: 213px;
background-color: #060dca;
}
.bar:nth-child(23) {
height: 48px;
background-color: #81530e;
}
.bar:nth-child(24) {
height: 118px;
background-color: #b56e22;
}
.bar:nth-child(25) {
height: 88px;
background-color: #7904fb;
}
.bar:nth-child(26) {
height: 187px;
background-color: #d2b707;
}
.bar:nth-child(27) {
height: 172px;
background-color: #dfddad;
}
.bar:nth-child(28) {
height: 98px;
background-color: #c0e8e4;
}
.bar:nth-child(29) {
height: 299px;
background-color: #602c1e;
}
.bar:nth-child(30) {
height: 149px;
background-color: #0bb3e8;
}
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment