Skip to content

Instantly share code, notes, and snippets.

@TexRx

TexRx/SassMeister-input-HTML.html

Created December 14, 2015 22:51
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save TexRx/ab33172912c13cc597e8 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div>
<button class="button" type="button">My Button</button>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$start-color: red;
// Also try with this:
// $start-color: #004011;
.button {
width: 100px;
height: 50px;
-webkit-animation: colorwheel 5s infinite;
background: $start-color;
color: white;
background: $start-color;
border: 1px solid rgba(0,0,0,0.08);
}
@-webkit-keyframes colorwheel {
$degrees: 360;
@for $deg from 0 through $degrees {
#{$deg * 0.3333%} {
background: adjust-hue($start-color, $deg);
}
}
}
Raw
SassMeister-output.css
.button {
width: 100px;
height: 50px;
-webkit-animation: colorwheel 5s infinite;
background: red;
color: white;
background: red;
border: 1px solid rgba(0, 0, 0, 0.08);
}
@-webkit-keyframes colorwheel {
0% {
background: red;
}
0.3333% {
background: #ff0400;
}
0.6666% {
background: #ff0900;
}
0.9999% {
background: #ff0d00;
}
1.3332% {
background: #ff1100;
}
1.6665% {
background: #ff1500;
}
1.9998% {
background: #ff1a00;
}
2.3331% {
background: #ff1e00;
}
2.6664% {
background: #ff2200;
}
2.9997% {
background: #ff2600;
}
3.333% {
background: #ff2b00;
}
3.6663% {
background: #ff2f00;
}
3.9996% {
background: #ff3300;
}
4.3329% {
background: #ff3700;
}
4.6662% {
background: #ff3c00;
}
4.9995% {
background: #ff4000;
}
5.3328% {
background: #ff4400;
}
5.6661% {
background: #ff4800;
}
5.9994% {
background: #ff4d00;
}
6.3327% {
background: #ff5100;
}
6.666% {
background: #ff5500;
}
6.9993% {
background: #ff5900;
}
7.3326% {
background: #ff5e00;
}
7.6659% {
background: #ff6200;
}
7.9992% {
background: #ff6600;
}
8.3325% {
background: #ff6a00;
}
8.6658% {
background: #ff6e00;
}
8.9991% {
background: #ff7300;
}
9.3324% {
background: #ff7700;
}
9.6657% {
background: #ff7b00;
}
9.999% {
background: #ff8000;
}
10.3323% {
background: #ff8400;
}
10.6656% {
background: #ff8800;
}
10.9989% {
background: darkorange;
}
11.3322% {
background: #ff9100;
}
11.6655% {
background: #ff9500;
}
11.9988% {
background: #ff9900;
}
12.3321% {
background: #ff9d00;
}
12.6654% {
background: #ffa200;
}
12.9987% {
background: #ffa600;
}
13.332% {
background: #ffaa00;
}
13.6653% {
background: #ffae00;
}
13.9986% {
background: #ffb300;
}
14.3319% {
background: #ffb700;
}
14.6652% {
background: #ffbb00;
}
14.9985% {
background: #ffbf00;
}
15.3318% {
background: #ffc300;
}
15.6651% {
background: #ffc800;
}
15.9984% {
background: #ffcc00;
}
16.3317% {
background: #ffd000;
}
16.665% {
background: #ffd500;
}
16.9983% {
background: #ffd900;
}
17.3316% {
background: #ffdd00;
}
17.6649% {
background: #ffe100;
}
17.9982% {
background: #ffe500;
}
18.3315% {
background: #ffea00;
}
18.6648% {
background: #ffee00;
}
18.9981% {
background: #fff200;
}
19.3314% {
background: #fff700;
}
19.6647% {
background: #fffb00;
}
19.998% {
background: yellow;
}
20.3313% {
background: #fbff00;
}
20.6646% {
background: #f6ff00;
}
20.9979% {
background: #f2ff00;
}
21.3312% {
background: #eeff00;
}
21.6645% {
background: #eaff00;
}
21.9978% {
background: #e6ff00;
}
22.3311% {
background: #e1ff00;
}
22.6644% {
background: #ddff00;
}
22.9977% {
background: #d9ff00;
}
23.331% {
background: #d4ff00;
}
23.6643% {
background: #d0ff00;
}
23.9976% {
background: #ccff00;
}
24.3309% {
background: #c8ff00;
}
24.6642% {
background: #c3ff00;
}
24.9975% {
background: #bfff00;
}
25.3308% {
background: #bbff00;
}
25.6641% {
background: #b7ff00;
}
25.9974% {
background: #b2ff00;
}
26.3307% {
background: #aeff00;
}
26.664% {
background: #aaff00;
}
26.9973% {
background: #a6ff00;
}
27.3306% {
background: #a1ff00;
}
27.6639% {
background: #9dff00;
}
27.9972% {
background: #99ff00;
}
28.3305% {
background: #95ff00;
}
28.6638% {
background: #91ff00;
}
28.9971% {
background: #8cff00;
}
29.3304% {
background: #88ff00;
}
29.6637% {
background: #84ff00;
}
29.997% {
background: #80ff00;
}
30.3303% {
background: #7bff00;
}
30.6636% {
background: #77ff00;
}
30.9969% {
background: #73ff00;
}
31.3302% {
background: #6eff00;
}
31.6635% {
background: #6aff00;
}
31.9968% {
background: #66ff00;
}
32.3301% {
background: #62ff00;
}
32.6634% {
background: #5eff00;
}
32.9967% {
background: #59ff00;
}
33.33% {
background: #55ff00;
}
33.6633% {
background: #51ff00;
}
33.9966% {
background: #4cff00;
}
34.3299% {
background: #48ff00;
}
34.6632% {
background: #44ff00;
}
34.9965% {
background: #40ff00;
}
35.3298% {
background: #3bff00;
}
35.6631% {
background: #37ff00;
}
35.9964% {
background: #33ff00;
}
36.3297% {
background: #2fff00;
}
36.663% {
background: #2bff00;
}
36.9963% {
background: #26ff00;
}
37.3296% {
background: #22ff00;
}
37.6629% {
background: #1eff00;
}
37.9962% {
background: #1aff00;
}
38.3295% {
background: #15ff00;
}
38.6628% {
background: #11ff00;
}
38.9961% {
background: #0dff00;
}
39.3294% {
background: #08ff00;
}
39.6627% {
background: #04ff00;
}
39.996% {
background: lime;
}
40.3293% {
background: #00ff04;
}
40.6626% {
background: #00ff09;
}
40.9959% {
background: #00ff0d;
}
41.3292% {
background: #00ff11;
}
41.6625% {
background: #00ff15;
}
41.9958% {
background: #00ff19;
}
42.3291% {
background: #00ff1e;
}
42.6624% {
background: #00ff22;
}
42.9957% {
background: #00ff26;
}
43.329% {
background: #00ff2b;
}
43.6623% {
background: #00ff2f;
}
43.9956% {
background: #00ff33;
}
44.3289% {
background: #00ff37;
}
44.6622% {
background: #00ff3c;
}
44.9955% {
background: #00ff40;
}
45.3288% {
background: #00ff44;
}
45.6621% {
background: #00ff48;
}
45.9954% {
background: #00ff4d;
}
46.3287% {
background: #00ff51;
}
46.662% {
background: #00ff55;
}
46.9953% {
background: #00ff59;
}
47.3286% {
background: #00ff5e;
}
47.6619% {
background: #00ff62;
}
47.9952% {
background: #00ff66;
}
48.3285% {
background: #00ff6a;
}
48.6618% {
background: #00ff6f;
}
48.9951% {
background: #00ff73;
}
49.3284% {
background: #00ff77;
}
49.6617% {
background: #00ff7b;
}
49.995% {
background: #00ff80;
}
50.3283% {
background: #00ff84;
}
50.6616% {
background: #00ff88;
}
50.9949% {
background: #00ff8c;
}
51.3282% {
background: #00ff91;
}
51.6615% {
background: #00ff95;
}
51.9948% {
background: #00ff99;
}
52.3281% {
background: #00ff9d;
}
52.6614% {
background: #00ffa2;
}
52.9947% {
background: #00ffa6;
}
53.328% {
background: #00ffaa;
}
53.6613% {
background: #00ffae;
}
53.9946% {
background: #00ffb3;
}
54.3279% {
background: #00ffb7;
}
54.6612% {
background: #00ffbb;
}
54.9945% {
background: #00ffbf;
}
55.3278% {
background: #00ffc4;
}
55.6611% {
background: #00ffc8;
}
55.9944% {
background: #00ffcc;
}
56.3277% {
background: #00ffd0;
}
56.661% {
background: #00ffd5;
}
56.9943% {
background: #00ffd9;
}
57.3276% {
background: #00ffdd;
}
57.6609% {
background: #00ffe1;
}
57.9942% {
background: #00ffe6;
}
58.3275% {
background: #00ffea;
}
58.6608% {
background: #00ffee;
}
58.9941% {
background: #00fff2;
}
59.3274% {
background: #00fff7;
}
59.6607% {
background: #00fffb;
}
59.994% {
background: cyan;
}
60.3273% {
background: #00fbff;
}
60.6606% {
background: #00f6ff;
}
60.9939% {
background: #00f2ff;
}
61.3272% {
background: #00eeff;
}
61.6605% {
background: #00eaff;
}
61.9938% {
background: #00e5ff;
}
62.3271% {
background: #00e1ff;
}
62.6604% {
background: #00ddff;
}
62.9937% {
background: #00d9ff;
}
63.327% {
background: #00d4ff;
}
63.6603% {
background: #00d0ff;
}
63.9936% {
background: #00ccff;
}
64.3269% {
background: #00c8ff;
}
64.6602% {
background: #00c3ff;
}
64.9935% {
background: deepskyblue;
}
65.3268% {
background: #00bbff;
}
65.6601% {
background: #00b7ff;
}
65.9934% {
background: #00b2ff;
}
66.3267% {
background: #00aeff;
}
66.66% {
background: #00aaff;
}
66.9933% {
background: #00a6ff;
}
67.3266% {
background: #00a1ff;
}
67.6599% {
background: #009dff;
}
67.9932% {
background: #0099ff;
}
68.3265% {
background: #0095ff;
}
68.6598% {
background: #0091ff;
}
68.9931% {
background: #008cff;
}
69.3264% {
background: #0088ff;
}
69.6597% {
background: #0084ff;
}
69.993% {
background: #007fff;
}
70.3263% {
background: #007bff;
}
70.6596% {
background: #0077ff;
}
70.9929% {
background: #0073ff;
}
71.3262% {
background: #006eff;
}
71.6595% {
background: #006aff;
}
71.9928% {
background: #0066ff;
}
72.3261% {
background: #0062ff;
}
72.6594% {
background: #005eff;
}
72.9927% {
background: #0059ff;
}
73.326% {
background: #0055ff;
}
73.6593% {
background: #0051ff;
}
73.9926% {
background: #004cff;
}
74.3259% {
background: #0048ff;
}
74.6592% {
background: #0044ff;
}
74.9925% {
background: #0040ff;
}
75.3258% {
background: #003bff;
}
75.6591% {
background: #0037ff;
}
75.9924% {
background: #0033ff;
}
76.3257% {
background: #002fff;
}
76.659% {
background: #002bff;
}
76.9923% {
background: #0026ff;
}
77.3256% {
background: #0022ff;
}
77.6589% {
background: #001eff;
}
77.9922% {
background: #0019ff;
}
78.3255% {
background: #0015ff;
}
78.6588% {
background: #0011ff;
}
78.9921% {
background: #000dff;
}
79.3254% {
background: #0008ff;
}
79.6587% {
background: #0004ff;
}
79.992% {
background: blue;
}
80.3253% {
background: #0400ff;
}
80.6586% {
background: #0800ff;
}
80.9919% {
background: #0d00ff;
}
81.3252% {
background: #1100ff;
}
81.6585% {
background: #1500ff;
}
81.9918% {
background: #1900ff;
}
82.3251% {
background: #1e00ff;
}
82.6584% {
background: #2200ff;
}
82.9917% {
background: #2600ff;
}
83.325% {
background: #2a00ff;
}
83.6583% {
background: #2f00ff;
}
83.9916% {
background: #3300ff;
}
84.3249% {
background: #3700ff;
}
84.6582% {
background: #3c00ff;
}
84.9915% {
background: #4000ff;
}
85.3248% {
background: #4400ff;
}
85.6581% {
background: #4800ff;
}
85.9914% {
background: #4d00ff;
}
86.3247% {
background: #5100ff;
}
86.658% {
background: #5500ff;
}
86.9913% {
background: #5900ff;
}
87.3246% {
background: #5e00ff;
}
87.6579% {
background: #6200ff;
}
87.9912% {
background: #6600ff;
}
88.3245% {
background: #6a00ff;
}
88.6578% {
background: #6e00ff;
}
88.9911% {
background: #7300ff;
}
89.3244% {
background: #7700ff;
}
89.6577% {
background: #7b00ff;
}
89.991% {
background: #7f00ff;
}
90.3243% {
background: #8400ff;
}
90.6576% {
background: #8800ff;
}
90.9909% {
background: #8c00ff;
}
91.3242% {
background: #9000ff;
}
91.6575% {
background: #9500ff;
}
91.9908% {
background: #9900ff;
}
92.3241% {
background: #9d00ff;
}
92.6574% {
background: #a200ff;
}
92.9907% {
background: #a600ff;
}
93.324% {
background: #aa00ff;
}
93.6573% {
background: #ae00ff;
}
93.9906% {
background: #b300ff;
}
94.3239% {
background: #b700ff;
}
94.6572% {
background: #bb00ff;
}
94.9905% {
background: #bf00ff;
}
95.3238% {
background: #c300ff;
}
95.6571% {
background: #c800ff;
}
95.9904% {
background: #cc00ff;
}
96.3237% {
background: #d000ff;
}
96.657% {
background: #d400ff;
}
96.9903% {
background: #d900ff;
}
97.3236% {
background: #dd00ff;
}
97.6569% {
background: #e100ff;
}
97.9902% {
background: #e500ff;
}
98.3235% {
background: #ea00ff;
}
98.6568% {
background: #ee00ff;
}
98.9901% {
background: #f200ff;
}
99.3234% {
background: #f600ff;
}
99.6567% {
background: #fb00ff;
}
99.99% {
background: magenta;
}
100.3233% {
background: #ff00fb;
}
100.6566% {
background: #ff00f6;
}
100.9899% {
background: #ff00f2;
}
101.3232% {
background: #ff00ee;
}
101.6565% {
background: #ff00ea;
}
101.9898% {
background: #ff00e6;
}
102.3231% {
background: #ff00e1;
}
102.6564% {
background: #ff00dd;
}
102.9897% {
background: #ff00d9;
}
103.323% {
background: #ff00d4;
}
103.6563% {
background: #ff00d0;
}
103.9896% {
background: #ff00cc;
}
104.3229% {
background: #ff00c8;
}
104.6562% {
background: #ff00c3;
}
104.9895% {
background: #ff00bf;
}
105.3228% {
background: #ff00bb;
}
105.6561% {
background: #ff00b7;
}
105.9894% {
background: #ff00b2;
}
106.3227% {
background: #ff00ae;
}
106.656% {
background: #ff00aa;
}
106.9893% {
background: #ff00a6;
}
107.3226% {
background: #ff00a1;
}
107.6559% {
background: #ff009d;
}
107.9892% {
background: #ff0099;
}
108.3225% {
background: #ff0095;
}
108.6558% {
background: #ff0091;
}
108.9891% {
background: #ff008c;
}
109.3224% {
background: #ff0088;
}
109.6557% {
background: #ff0084;
}
109.989% {
background: #ff0080;
}
110.3223% {
background: #ff007b;
}
110.6556% {
background: #ff0077;
}
110.9889% {
background: #ff0073;
}
111.3222% {
background: #ff006e;
}
111.6555% {
background: #ff006a;
}
111.9888% {
background: #ff0066;
}
112.3221% {
background: #ff0062;
}
112.6554% {
background: #ff005d;
}
112.9887% {
background: #ff0059;
}
113.322% {
background: #ff0055;
}
113.6553% {
background: #ff0051;
}
113.9886% {
background: #ff004c;
}
114.3219% {
background: #ff0048;
}
114.6552% {
background: #ff0044;
}
114.9885% {
background: #ff0040;
}
115.3218% {
background: #ff003b;
}
115.6551% {
background: #ff0037;
}
115.9884% {
background: #ff0033;
}
116.3217% {
background: #ff002f;
}
116.655% {
background: #ff002b;
}
116.9883% {
background: #ff0026;
}
117.3216% {
background: #ff0022;
}
117.6549% {
background: #ff001e;
}
117.9882% {
background: #ff001a;
}
118.3215% {
background: #ff0015;
}
118.6548% {
background: #ff0011;
}
118.9881% {
background: #ff000d;
}
119.3214% {
background: #ff0008;
}
119.6547% {
background: #ff0004;
}
119.988% {
background: red;
}
}
Raw
SassMeister-rendered.html
<div>
<button class="button" type="button">My Button</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment