Skip to content

Instantly share code, notes, and snippets.

@thewolff

thewolff/SassMeister-input-HTML.html

Created March 4, 2015 22:10
Show Gist options
  • Save thewolff/ade811648b7440b8bfbd to your computer and use it in GitHub Desktop.
Save thewolff/ade811648b7440b8bfbd to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul><li>animation-delay: 0</li><li>animation-delay: 0.5</li><li>animation-delay: 1</li><li>animation-delay: 2</li><li>animation-delay: 2.5</li><li>animation-delay: 3</li><li>animation-delay: 4</li><li>animation-delay: 4.5</li><li>animation-delay: 5</li><li>animation-delay: 6</li></ul>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$ii: 0;
$inc: 0.5;
$items: (10);
$html: 0;
@for $i from 1 through $items {
$dec: ($i*$inc);
li:nth-of-type(#{$i}){
@if $i > 0 {
@if ($i % 3 == 0) {
butt: $ii+1;
$ii: $ii+1;
}
$html: $dec+($ii*$inc);
} @else {
$html: $dec;
}
animation-delay:$html;
i-mod-3: ($i%3);
i: $i;
dec: $dec;
ii: $ii;
inc: $inc;
ii-times-inc: $ii*$inc;
dec-plus-ii-times-inc: $dec+($ii*$inc);
}
}
li {
color: 6%3;
}
Raw
SassMeister-output.css
li:nth-of-type(1) {
animation-delay: 0.5;
i-mod-3: 1;
i: 1;
dec: 0.5;
ii: 0;
inc: 0.5;
ii-times-inc: 0;
dec-plus-ii-times-inc: 0.5;
}
li:nth-of-type(2) {
animation-delay: 1;
i-mod-3: 2;
i: 2;
dec: 1;
ii: 0;
inc: 0.5;
ii-times-inc: 0;
dec-plus-ii-times-inc: 1;
}
li:nth-of-type(3) {
butt: 1;
animation-delay: 2;
i-mod-3: 0;
i: 3;
dec: 1.5;
ii: 1;
inc: 0.5;
ii-times-inc: 0.5;
dec-plus-ii-times-inc: 2;
}
li:nth-of-type(4) {
animation-delay: 2.5;
i-mod-3: 1;
i: 4;
dec: 2;
ii: 1;
inc: 0.5;
ii-times-inc: 0.5;
dec-plus-ii-times-inc: 2.5;
}
li:nth-of-type(5) {
animation-delay: 3;
i-mod-3: 2;
i: 5;
dec: 2.5;
ii: 1;
inc: 0.5;
ii-times-inc: 0.5;
dec-plus-ii-times-inc: 3;
}
li:nth-of-type(6) {
butt: 2;
animation-delay: 4;
i-mod-3: 0;
i: 6;
dec: 3;
ii: 2;
inc: 0.5;
ii-times-inc: 1;
dec-plus-ii-times-inc: 4;
}
li:nth-of-type(7) {
animation-delay: 4.5;
i-mod-3: 1;
i: 7;
dec: 3.5;
ii: 2;
inc: 0.5;
ii-times-inc: 1;
dec-plus-ii-times-inc: 4.5;
}
li:nth-of-type(8) {
animation-delay: 5;
i-mod-3: 2;
i: 8;
dec: 4;
ii: 2;
inc: 0.5;
ii-times-inc: 1;
dec-plus-ii-times-inc: 5;
}
li:nth-of-type(9) {
butt: 3;
animation-delay: 6;
i-mod-3: 0;
i: 9;
dec: 4.5;
ii: 3;
inc: 0.5;
ii-times-inc: 1.5;
dec-plus-ii-times-inc: 6;
}
li:nth-of-type(10) {
animation-delay: 6.5;
i-mod-3: 1;
i: 10;
dec: 5;
ii: 3;
inc: 0.5;
ii-times-inc: 1.5;
dec-plus-ii-times-inc: 6.5;
}
li {
color: 6% 3;
}
Raw
SassMeister-rendered.html
<ul><li>animation-delay: 0</li><li>animation-delay: 0.5</li><li>animation-delay: 1</li><li>animation-delay: 2</li><li>animation-delay: 2.5</li><li>animation-delay: 3</li><li>animation-delay: 4</li><li>animation-delay: 4.5</li><li>animation-delay: 5</li><li>animation-delay: 6</li></ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment