Skip to content

Instantly share code, notes, and snippets.

@lozandier

lozandier/SassMeister-input-HTML.haml

Last active November 11, 2015 22:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lozandier/642298f5fc1474af61f1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lozandier/642298f5fc1474af61f1 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
// loop.scss
@keyframes color {
// here goes the for loop
@for $i from 1 through 360 {
#{$i * 0.278}% {
background-color: hsl($i, 60%, 60%)
}
}
}
div {
width: 400px;
height: 400px;
border-radius: 50%;
animation: color 10s infinite;
background-color: #000;
}
Raw
SassMeister-output.css
@keyframes color {
0.278% {
background-color: #d65e5c;
}
0.556% {
background-color: #d6605c;
}
0.834% {
background-color: #d6625c;
}
1.112% {
background-color: #d6645c;
}
1.39% {
background-color: #d6665c;
}
1.668% {
background-color: #d6685c;
}
1.946% {
background-color: #d66a5c;
}
2.224% {
background-color: #d66c5c;
}
2.502% {
background-color: #d66e5c;
}
2.78% {
background-color: #d6705c;
}
3.058% {
background-color: #d6725c;
}
3.336% {
background-color: #d6745c;
}
3.614% {
background-color: #d6765c;
}
3.892% {
background-color: #d6785c;
}
4.17% {
background-color: #d67a5c;
}
4.448% {
background-color: #d67c5c;
}
4.726% {
background-color: #d67e5c;
}
5.004% {
background-color: #d6815c;
}
5.282% {
background-color: #d6835c;
}
5.56% {
background-color: #d6855c;
}
5.838% {
background-color: #d6875c;
}
6.116% {
background-color: #d6895c;
}
6.394% {
background-color: #d68b5c;
}
6.672% {
background-color: #d68d5c;
}
6.95% {
background-color: #d68f5c;
}
7.228% {
background-color: #d6915c;
}
7.506% {
background-color: #d6935c;
}
7.784% {
background-color: #d6955c;
}
8.062% {
background-color: #d6975c;
}
8.34% {
background-color: #d6995c;
}
8.618% {
background-color: #d69b5c;
}
8.896% {
background-color: #d69d5c;
}
9.174% {
background-color: #d69f5c;
}
9.452% {
background-color: #d6a15c;
}
9.73% {
background-color: #d6a35c;
}
10.008% {
background-color: #d6a55c;
}
10.286% {
background-color: #d6a75c;
}
10.564% {
background-color: #d6a95c;
}
10.842% {
background-color: #d6ab5c;
}
11.12% {
background-color: #d6ad5c;
}
11.398% {
background-color: #d6af5c;
}
11.676% {
background-color: #d6b15c;
}
11.954% {
background-color: #d6b45c;
}
12.232% {
background-color: #d6b65c;
}
12.51% {
background-color: #d6b85c;
}
12.788% {
background-color: #d6ba5c;
}
13.066% {
background-color: #d6bc5c;
}
13.344% {
background-color: #d6be5c;
}
13.622% {
background-color: #d6c05c;
}
13.9% {
background-color: #d6c25c;
}
14.178% {
background-color: #d6c45c;
}
14.456% {
background-color: #d6c65c;
}
14.734% {
background-color: #d6c85c;
}
15.012% {
background-color: #d6ca5c;
}
15.29% {
background-color: #d6cc5c;
}
15.568% {
background-color: #d6ce5c;
}
15.846% {
background-color: #d6d05c;
}
16.124% {
background-color: #d6d25c;
}
16.402% {
background-color: #d6d45c;
}
16.68% {
background-color: #d6d65c;
}
16.958% {
background-color: #d4d65c;
}
17.236% {
background-color: #d2d65c;
}
17.514% {
background-color: #d0d65c;
}
17.792% {
background-color: #ced65c;
}
18.07% {
background-color: #ccd65c;
}
18.348% {
background-color: #cad65c;
}
18.626% {
background-color: #c8d65c;
}
18.904% {
background-color: #c6d65c;
}
19.182% {
background-color: #c4d65c;
}
19.46% {
background-color: #c2d65c;
}
19.738% {
background-color: #c0d65c;
}
20.016% {
background-color: #bed65c;
}
20.294% {
background-color: #bcd65c;
}
20.572% {
background-color: #bad65c;
}
20.85% {
background-color: #b8d65c;
}
21.128% {
background-color: #b6d65c;
}
21.406% {
background-color: #b4d65c;
}
21.684% {
background-color: #b1d65c;
}
21.962% {
background-color: #afd65c;
}
22.24% {
background-color: #add65c;
}
22.518% {
background-color: #abd65c;
}
22.796% {
background-color: #a9d65c;
}
23.074% {
background-color: #a7d65c;
}
23.352% {
background-color: #a5d65c;
}
23.63% {
background-color: #a3d65c;
}
23.908% {
background-color: #a1d65c;
}
24.186% {
background-color: #9fd65c;
}
24.464% {
background-color: #9dd65c;
}
24.742% {
background-color: #9bd65c;
}
25.02% {
background-color: #99d65c;
}
25.298% {
background-color: #97d65c;
}
25.576% {
background-color: #95d65c;
}
25.854% {
background-color: #93d65c;
}
26.132% {
background-color: #91d65c;
}
26.41% {
background-color: #8fd65c;
}
26.688% {
background-color: #8dd65c;
}
26.966% {
background-color: #8bd65c;
}
27.244% {
background-color: #89d65c;
}
27.522% {
background-color: #87d65c;
}
27.8% {
background-color: #85d65c;
}
28.078% {
background-color: #83d65c;
}
28.356% {
background-color: #81d65c;
}
28.634% {
background-color: #7ed65c;
}
28.912% {
background-color: #7cd65c;
}
29.19% {
background-color: #7ad65c;
}
29.468% {
background-color: #78d65c;
}
29.746% {
background-color: #76d65c;
}
30.024% {
background-color: #74d65c;
}
30.302% {
background-color: #72d65c;
}
30.58% {
background-color: #70d65c;
}
30.858% {
background-color: #6ed65c;
}
31.136% {
background-color: #6cd65c;
}
31.414% {
background-color: #6ad65c;
}
31.692% {
background-color: #68d65c;
}
31.97% {
background-color: #66d65c;
}
32.248% {
background-color: #64d65c;
}
32.526% {
background-color: #62d65c;
}
32.804% {
background-color: #60d65c;
}
33.082% {
background-color: #5ed65c;
}
33.36% {
background-color: #5cd65c;
}
33.638% {
background-color: #5cd65e;
}
33.916% {
background-color: #5cd660;
}
34.194% {
background-color: #5cd662;
}
34.472% {
background-color: #5cd664;
}
34.75% {
background-color: #5cd666;
}
35.028% {
background-color: #5cd668;
}
35.306% {
background-color: #5cd66a;
}
35.584% {
background-color: #5cd66c;
}
35.862% {
background-color: #5cd66e;
}
36.14% {
background-color: #5cd670;
}
36.418% {
background-color: #5cd672;
}
36.696% {
background-color: #5cd674;
}
36.974% {
background-color: #5cd676;
}
37.252% {
background-color: #5cd678;
}
37.53% {
background-color: #5cd67a;
}
37.808% {
background-color: #5cd67c;
}
38.086% {
background-color: #5cd67e;
}
38.364% {
background-color: #5cd681;
}
38.642% {
background-color: #5cd683;
}
38.92% {
background-color: #5cd685;
}
39.198% {
background-color: #5cd687;
}
39.476% {
background-color: #5cd689;
}
39.754% {
background-color: #5cd68b;
}
40.032% {
background-color: #5cd68d;
}
40.31% {
background-color: #5cd68f;
}
40.588% {
background-color: #5cd691;
}
40.866% {
background-color: #5cd693;
}
41.144% {
background-color: #5cd695;
}
41.422% {
background-color: #5cd697;
}
41.7% {
background-color: #5cd699;
}
41.978% {
background-color: #5cd69b;
}
42.256% {
background-color: #5cd69d;
}
42.534% {
background-color: #5cd69f;
}
42.812% {
background-color: #5cd6a1;
}
43.09% {
background-color: #5cd6a3;
}
43.368% {
background-color: #5cd6a5;
}
43.646% {
background-color: #5cd6a7;
}
43.924% {
background-color: #5cd6a9;
}
44.202% {
background-color: #5cd6ab;
}
44.48% {
background-color: #5cd6ad;
}
44.758% {
background-color: #5cd6af;
}
45.036% {
background-color: #5cd6b1;
}
45.314% {
background-color: #5cd6b4;
}
45.592% {
background-color: #5cd6b6;
}
45.87% {
background-color: #5cd6b8;
}
46.148% {
background-color: #5cd6ba;
}
46.426% {
background-color: #5cd6bc;
}
46.704% {
background-color: #5cd6be;
}
46.982% {
background-color: #5cd6c0;
}
47.26% {
background-color: #5cd6c2;
}
47.538% {
background-color: #5cd6c4;
}
47.816% {
background-color: #5cd6c6;
}
48.094% {
background-color: #5cd6c8;
}
48.372% {
background-color: #5cd6ca;
}
48.65% {
background-color: #5cd6cc;
}
48.928% {
background-color: #5cd6ce;
}
49.206% {
background-color: #5cd6d0;
}
49.484% {
background-color: #5cd6d2;
}
49.762% {
background-color: #5cd6d4;
}
50.04% {
background-color: #5cd6d6;
}
50.318% {
background-color: #5cd4d6;
}
50.596% {
background-color: #5cd2d6;
}
50.874% {
background-color: #5cd0d6;
}
51.152% {
background-color: #5cced6;
}
51.43% {
background-color: #5cccd6;
}
51.708% {
background-color: #5ccad6;
}
51.986% {
background-color: #5cc8d6;
}
52.264% {
background-color: #5cc6d6;
}
52.542% {
background-color: #5cc4d6;
}
52.82% {
background-color: #5cc2d6;
}
53.098% {
background-color: #5cc0d6;
}
53.376% {
background-color: #5cbed6;
}
53.654% {
background-color: #5cbcd6;
}
53.932% {
background-color: #5cbad6;
}
54.21% {
background-color: #5cb8d6;
}
54.488% {
background-color: #5cb6d6;
}
54.766% {
background-color: #5cb4d6;
}
55.044% {
background-color: #5cb1d6;
}
55.322% {
background-color: #5cafd6;
}
55.6% {
background-color: #5cadd6;
}
55.878% {
background-color: #5cabd6;
}
56.156% {
background-color: #5ca9d6;
}
56.434% {
background-color: #5ca7d6;
}
56.712% {
background-color: #5ca5d6;
}
56.99% {
background-color: #5ca3d6;
}
57.268% {
background-color: #5ca1d6;
}
57.546% {
background-color: #5c9fd6;
}
57.824% {
background-color: #5c9dd6;
}
58.102% {
background-color: #5c9bd6;
}
58.38% {
background-color: #5c99d6;
}
58.658% {
background-color: #5c97d6;
}
58.936% {
background-color: #5c95d6;
}
59.214% {
background-color: #5c93d6;
}
59.492% {
background-color: #5c91d6;
}
59.77% {
background-color: #5c8fd6;
}
60.048% {
background-color: #5c8dd6;
}
60.326% {
background-color: #5c8bd6;
}
60.604% {
background-color: #5c89d6;
}
60.882% {
background-color: #5c87d6;
}
61.16% {
background-color: #5c85d6;
}
61.438% {
background-color: #5c83d6;
}
61.716% {
background-color: #5c81d6;
}
61.994% {
background-color: #5c7ed6;
}
62.272% {
background-color: #5c7cd6;
}
62.55% {
background-color: #5c7ad6;
}
62.828% {
background-color: #5c78d6;
}
63.106% {
background-color: #5c76d6;
}
63.384% {
background-color: #5c74d6;
}
63.662% {
background-color: #5c72d6;
}
63.94% {
background-color: #5c70d6;
}
64.218% {
background-color: #5c6ed6;
}
64.496% {
background-color: #5c6cd6;
}
64.774% {
background-color: #5c6ad6;
}
65.052% {
background-color: #5c68d6;
}
65.33% {
background-color: #5c66d6;
}
65.608% {
background-color: #5c64d6;
}
65.886% {
background-color: #5c62d6;
}
66.164% {
background-color: #5c60d6;
}
66.442% {
background-color: #5c5ed6;
}
66.72% {
background-color: #5c5cd6;
}
66.998% {
background-color: #5e5cd6;
}
67.276% {
background-color: #605cd6;
}
67.554% {
background-color: #625cd6;
}
67.832% {
background-color: #645cd6;
}
68.11% {
background-color: #665cd6;
}
68.388% {
background-color: #685cd6;
}
68.666% {
background-color: #6a5cd6;
}
68.944% {
background-color: #6c5cd6;
}
69.222% {
background-color: #6e5cd6;
}
69.5% {
background-color: #705cd6;
}
69.778% {
background-color: #725cd6;
}
70.056% {
background-color: #745cd6;
}
70.334% {
background-color: #765cd6;
}
70.612% {
background-color: #785cd6;
}
70.89% {
background-color: #7a5cd6;
}
71.168% {
background-color: #7c5cd6;
}
71.446% {
background-color: #7e5cd6;
}
71.724% {
background-color: #815cd6;
}
72.002% {
background-color: #835cd6;
}
72.28% {
background-color: #855cd6;
}
72.558% {
background-color: #875cd6;
}
72.836% {
background-color: #895cd6;
}
73.114% {
background-color: #8b5cd6;
}
73.392% {
background-color: #8d5cd6;
}
73.67% {
background-color: #8f5cd6;
}
73.948% {
background-color: #915cd6;
}
74.226% {
background-color: #935cd6;
}
74.504% {
background-color: #955cd6;
}
74.782% {
background-color: #975cd6;
}
75.06% {
background-color: #995cd6;
}
75.338% {
background-color: #9b5cd6;
}
75.616% {
background-color: #9d5cd6;
}
75.894% {
background-color: #9f5cd6;
}
76.172% {
background-color: #a15cd6;
}
76.45% {
background-color: #a35cd6;
}
76.728% {
background-color: #a55cd6;
}
77.006% {
background-color: #a75cd6;
}
77.284% {
background-color: #a95cd6;
}
77.562% {
background-color: #ab5cd6;
}
77.84% {
background-color: #ad5cd6;
}
78.118% {
background-color: #af5cd6;
}
78.396% {
background-color: #b15cd6;
}
78.674% {
background-color: #b45cd6;
}
78.952% {
background-color: #b65cd6;
}
79.23% {
background-color: #b85cd6;
}
79.508% {
background-color: #ba5cd6;
}
79.786% {
background-color: #bc5cd6;
}
80.064% {
background-color: #be5cd6;
}
80.342% {
background-color: #c05cd6;
}
80.62% {
background-color: #c25cd6;
}
80.898% {
background-color: #c45cd6;
}
81.176% {
background-color: #c65cd6;
}
81.454% {
background-color: #c85cd6;
}
81.732% {
background-color: #ca5cd6;
}
82.01% {
background-color: #cc5cd6;
}
82.288% {
background-color: #ce5cd6;
}
82.566% {
background-color: #d05cd6;
}
82.844% {
background-color: #d25cd6;
}
83.122% {
background-color: #d45cd6;
}
83.4% {
background-color: #d65cd6;
}
83.678% {
background-color: #d65cd4;
}
83.956% {
background-color: #d65cd2;
}
84.234% {
background-color: #d65cd0;
}
84.512% {
background-color: #d65cce;
}
84.79% {
background-color: #d65ccc;
}
85.068% {
background-color: #d65cca;
}
85.346% {
background-color: #d65cc8;
}
85.624% {
background-color: #d65cc6;
}
85.902% {
background-color: #d65cc4;
}
86.18% {
background-color: #d65cc2;
}
86.458% {
background-color: #d65cc0;
}
86.736% {
background-color: #d65cbe;
}
87.014% {
background-color: #d65cbc;
}
87.292% {
background-color: #d65cba;
}
87.57% {
background-color: #d65cb8;
}
87.848% {
background-color: #d65cb6;
}
88.126% {
background-color: #d65cb4;
}
88.404% {
background-color: #d65cb1;
}
88.682% {
background-color: #d65caf;
}
88.96% {
background-color: #d65cad;
}
89.238% {
background-color: #d65cab;
}
89.516% {
background-color: #d65ca9;
}
89.794% {
background-color: #d65ca7;
}
90.072% {
background-color: #d65ca5;
}
90.35% {
background-color: #d65ca3;
}
90.628% {
background-color: #d65ca1;
}
90.906% {
background-color: #d65c9f;
}
91.184% {
background-color: #d65c9d;
}
91.462% {
background-color: #d65c9b;
}
91.74% {
background-color: #d65c99;
}
92.018% {
background-color: #d65c97;
}
92.296% {
background-color: #d65c95;
}
92.574% {
background-color: #d65c93;
}
92.852% {
background-color: #d65c91;
}
93.13% {
background-color: #d65c8f;
}
93.408% {
background-color: #d65c8d;
}
93.686% {
background-color: #d65c8b;
}
93.964% {
background-color: #d65c89;
}
94.242% {
background-color: #d65c87;
}
94.52% {
background-color: #d65c85;
}
94.798% {
background-color: #d65c83;
}
95.076% {
background-color: #d65c81;
}
95.354% {
background-color: #d65c7e;
}
95.632% {
background-color: #d65c7c;
}
95.91% {
background-color: #d65c7a;
}
96.188% {
background-color: #d65c78;
}
96.466% {
background-color: #d65c76;
}
96.744% {
background-color: #d65c74;
}
97.022% {
background-color: #d65c72;
}
97.3% {
background-color: #d65c70;
}
97.578% {
background-color: #d65c6e;
}
97.856% {
background-color: #d65c6c;
}
98.134% {
background-color: #d65c6a;
}
98.412% {
background-color: #d65c68;
}
98.69% {
background-color: #d65c66;
}
98.968% {
background-color: #d65c64;
}
99.246% {
background-color: #d65c62;
}
99.524% {
background-color: #d65c60;
}
99.802% {
background-color: #d65c5e;
}
100.08% {
background-color: #d65c5c;
}
}
div {
width: 400px;
height: 400px;
border-radius: 50%;
animation: color 10s infinite;
background-color: #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment