Skip to content

Instantly share code, notes, and snippets.

@fret2buzz

fret2buzz/SassMeister-input-HTML.html

Created March 1, 2015 16:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fret2buzz/a68369d25fbc8ec79706 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fret2buzz/a68369d25fbc8ec79706 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
<div class="item item-5"></div>
<div class="item item-6"></div>
<div class="item item-7"></div>
<div class="item item-8"></div>
<div class="item item-9"></div>
<div class="item item-10"></div>
<div class="item item-11"></div>
<div class="item item-12"></div>
<div class="item item-13"></div>
<div class="item item-14"></div>
<div class="item item-15"></div>
<div class="item item-16"></div>
<div class="item item-17"></div>
<div class="item item-18"></div>
<div class="item item-19"></div>
<div class="item item-20"></div>
<div class="item item-21"></div>
<div class="item item-22"></div>
<div class="item item-23"></div>
<div class="item item-24"></div>
<div class="item item-25"></div>
<div class="item item-26"></div>
<div class="item item-27"></div>
<div class="item item-28"></div>
<div class="item item-29"></div>
<div class="item item-30"></div>
<div class="item item-31"></div>
<div class="item item-32"></div>
<div class="item item-33"></div>
<div class="item item-34"></div>
<div class="item item-35"></div>
<div class="item item-36"></div>
<div class="item item-37"></div>
<div class="item item-38"></div>
<div class="item item-39"></div>
<div class="item item-40"></div>
<div class="item item-41"></div>
<div class="item item-42"></div>
<div class="item item-43"></div>
<div class="item item-44"></div>
<div class="item item-45"></div>
<div class="item item-46"></div>
<div class="item item-47"></div>
<div class="item item-48"></div>
<div class="item item-49"></div>
<div class="item item-50"></div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
.item {
height: 5px;
width: 100%;
}
$i: 1;
@while $i < 50 {
.item-#{$i} {
background: lighten(grey, $i * .42%);
}
$i: $i + 1;
}
Raw
SassMeister-output.css
.item {
height: 5px;
width: 100%;
}
.item-1 {
background: #818181;
}
.item-2 {
background: #828282;
}
.item-3 {
background: #838383;
}
.item-4 {
background: #848484;
}
.item-5 {
background: #858585;
}
.item-6 {
background: #868686;
}
.item-7 {
background: #878787;
}
.item-8 {
background: #898989;
}
.item-9 {
background: #8a8a8a;
}
.item-10 {
background: #8b8b8b;
}
.item-11 {
background: #8c8c8c;
}
.item-12 {
background: #8d8d8d;
}
.item-13 {
background: #8e8e8e;
}
.item-14 {
background: #8f8f8f;
}
.item-15 {
background: #909090;
}
.item-16 {
background: #919191;
}
.item-17 {
background: #929292;
}
.item-18 {
background: #939393;
}
.item-19 {
background: #949494;
}
.item-20 {
background: #959595;
}
.item-21 {
background: #969696;
}
.item-22 {
background: #989898;
}
.item-23 {
background: #999999;
}
.item-24 {
background: #9a9a9a;
}
.item-25 {
background: #9b9b9b;
}
.item-26 {
background: #9c9c9c;
}
.item-27 {
background: #9d9d9d;
}
.item-28 {
background: #9e9e9e;
}
.item-29 {
background: #9f9f9f;
}
.item-30 {
background: #a0a0a0;
}
.item-31 {
background: #a1a1a1;
}
.item-32 {
background: #a2a2a2;
}
.item-33 {
background: #a3a3a3;
}
.item-34 {
background: #a4a4a4;
}
.item-35 {
background: #a5a5a5;
}
.item-36 {
background: #a7a7a7;
}
.item-37 {
background: #a8a8a8;
}
.item-38 {
background: darkgray;
}
.item-39 {
background: #aaaaaa;
}
.item-40 {
background: #ababab;
}
.item-41 {
background: #acacac;
}
.item-42 {
background: #adadad;
}
.item-43 {
background: #aeaeae;
}
.item-44 {
background: #afafaf;
}
.item-45 {
background: #b0b0b0;
}
.item-46 {
background: #b1b1b1;
}
.item-47 {
background: #b2b2b2;
}
.item-48 {
background: #b3b3b3;
}
.item-49 {
background: #b4b4b4;
}
Raw
SassMeister-rendered.html
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
<div class="item item-5"></div>
<div class="item item-6"></div>
<div class="item item-7"></div>
<div class="item item-8"></div>
<div class="item item-9"></div>
<div class="item item-10"></div>
<div class="item item-11"></div>
<div class="item item-12"></div>
<div class="item item-13"></div>
<div class="item item-14"></div>
<div class="item item-15"></div>
<div class="item item-16"></div>
<div class="item item-17"></div>
<div class="item item-18"></div>
<div class="item item-19"></div>
<div class="item item-20"></div>
<div class="item item-21"></div>
<div class="item item-22"></div>
<div class="item item-23"></div>
<div class="item item-24"></div>
<div class="item item-25"></div>
<div class="item item-26"></div>
<div class="item item-27"></div>
<div class="item item-28"></div>
<div class="item item-29"></div>
<div class="item item-30"></div>
<div class="item item-31"></div>
<div class="item item-32"></div>
<div class="item item-33"></div>
<div class="item item-34"></div>
<div class="item item-35"></div>
<div class="item item-36"></div>
<div class="item item-37"></div>
<div class="item item-38"></div>
<div class="item item-39"></div>
<div class="item item-40"></div>
<div class="item item-41"></div>
<div class="item item-42"></div>
<div class="item item-43"></div>
<div class="item item-44"></div>
<div class="item item-45"></div>
<div class="item item-46"></div>
<div class="item item-47"></div>
<div class="item item-48"></div>
<div class="item item-49"></div>
<div class="item item-50"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment