Skip to content

Instantly share code, notes, and snippets.

@jessehouchins

jessehouchins/SassMeister-input-HTML.html

Forked from anonymous/SassMeister-input-HTML.html
Last active August 29, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jessehouchins/ce08ff252ce4e941dd36 to your computer and use it in GitHub Desktop.
Save jessehouchins/ce08ff252ce4e941dd36 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SassMeister-input-HTML.html
<html>
<body>
<swatch color="black">
<color darken="66"></color>
<color darken="44"></color>
<color darken="22"></color>
<color></color>
<color lighten="18"></color>
<color lighten="36"></color>
<color lighten="54"></color>
<color lighten="72"></color>
<color lighten="90"></color>
<color lighten="95"></color>
<color lighten="97"></color>
</swatch>
<swatch color="blue">
<color spacer> </color>
<color spacer> </color>
<color darken="22"></color>
<color></color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color lighten="90"></color>
<color lighten="95"></color>
</swatch>
<swatch color="green">
<color spacer> </color>
<color spacer> </color>
<color darken="22"></color>
<color></color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color lighten="90"></color>
<color lighten="95"></color>
</swatch>
<swatch color="yellow">
<color spacer> </color>
<color spacer> </color>
<color darken="22"></color>
<color></color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color lighten="90"></color>
<color lighten="95"></color>
</swatch>
<swatch color="red">
<color spacer> </color>
<color spacer> </color>
<color darken="22"></color>
<color></color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color lighten="90"></color>
<color lighten="95"></color>
</swatch>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@mixin swatch($clr, $lt) {
$scaled: scale_color($clr, $lightness: $lt);
background: $scaled;
&:before { content: "#{$scaled} (#{$lt})"; }
}
@mixin swatch-group($clr) {
color { @include swatch($clr, 0%); }
color[darken="22"] { @include swatch($clr, -22%); }
color[darken="44"] { @include swatch($clr, -44%); }
color[darken="66"] { @include swatch($clr, -66%); }
color[lighten="10"] { @include swatch($clr, 10%); }
color[lighten="18"] { @include swatch($clr, 18%); }
color[lighten="36"] { @include swatch($clr, 36%); }
color[lighten="54"] { @include swatch($clr, 54%); }
color[lighten="72"] { @include swatch($clr, 72%); }
color[lighten="40"] { @include swatch($clr, 40%); }
color[lighten="50"] { @include swatch($clr, 50%); }
color[lighten="60"] { @include swatch($clr, 60%); }
color[lighten="70"] { @include swatch($clr, 70%); }
color[lighten="80"] { @include swatch($clr, 80%); }
color[lighten="89.5"] { @include swatch($clr, 89.5%); }
color[lighten="90"] { @include swatch($clr, 90%); }
color[lighten="95"] { @include swatch($clr, 95%); }
color[lighten="97"] { @include swatch($clr, 97%); }
}
[color="black"] { @include swatch-group(#67767f); }
[color="blue"] { @include swatch-group(#1997c8); }
[color="green"] { @include swatch-group(#13aa37); }
[color="yellow"] { @include swatch-group(#eaa62f); }
[color="red"] { @include swatch-group(#ea322f); }
* { box-sizing: border-box; margin: 0; }
body { display: table; width: 100%; padding: 20px; }
swatch { display: table-cell; }
color { color: white; width: 100%; display: block; padding: 10px; border: 1px solid #CCC; margin: 4px 0; }
color[lighten] { color: black; }
color[spacer] {
background: #EEE;
border-color: transparent;
text-indent: -999in;
}
Raw
SassMeister-output.css
[color="black"] color {
background: #67767f;
}
[color="black"] color:before {
content: "#67767f (0%)";
}
[color="black"] color[darken="22"] {
background: #505c63;
}
[color="black"] color[darken="22"]:before {
content: "#505c63 (-22%)";
}
[color="black"] color[darken="44"] {
background: #3a4247;
}
[color="black"] color[darken="44"]:before {
content: "#3a4247 (-44%)";
}
[color="black"] color[darken="66"] {
background: #23282b;
}
[color="black"] color[darken="66"]:before {
content: "#23282b (-66%)";
}
[color="black"] color[lighten="10"] {
background: #74848e;
}
[color="black"] color[lighten="10"]:before {
content: "#74848e (10%)";
}
[color="black"] color[lighten="18"] {
background: #808f98;
}
[color="black"] color[lighten="18"]:before {
content: "#808f98 (18%)";
}
[color="black"] color[lighten="36"] {
background: #9ca8af;
}
[color="black"] color[lighten="36"]:before {
content: "#9ca8af (36%)";
}
[color="black"] color[lighten="54"] {
background: #b8c0c5;
}
[color="black"] color[lighten="54"]:before {
content: "#b8c0c5 (54%)";
}
[color="black"] color[lighten="72"] {
background: #d4d9dc;
}
[color="black"] color[lighten="72"]:before {
content: "#d4d9dc (72%)";
}
[color="black"] color[lighten="40"] {
background: #a2adb4;
}
[color="black"] color[lighten="40"]:before {
content: "#a2adb4 (40%)";
}
[color="black"] color[lighten="50"] {
background: #b2bbc0;
}
[color="black"] color[lighten="50"]:before {
content: "#b2bbc0 (50%)";
}
[color="black"] color[lighten="60"] {
background: #c1c8cd;
}
[color="black"] color[lighten="60"]:before {
content: "#c1c8cd (60%)";
}
[color="black"] color[lighten="70"] {
background: #d1d6d9;
}
[color="black"] color[lighten="70"]:before {
content: "#d1d6d9 (70%)";
}
[color="black"] color[lighten="80"] {
background: #e0e4e6;
}
[color="black"] color[lighten="80"]:before {
content: "#e0e4e6 (80%)";
}
[color="black"] color[lighten="89.5"] {
background: #eff1f2;
}
[color="black"] color[lighten="89.5"]:before {
content: "#eff1f2 (89.5%)";
}
[color="black"] color[lighten="90"] {
background: #f0f1f2;
}
[color="black"] color[lighten="90"]:before {
content: "#f0f1f2 (90%)";
}
[color="black"] color[lighten="95"] {
background: #f7f8f9;
}
[color="black"] color[lighten="95"]:before {
content: "#f7f8f9 (95%)";
}
[color="black"] color[lighten="97"] {
background: #fafbfb;
}
[color="black"] color[lighten="97"]:before {
content: "#fafbfb (97%)";
}
[color="blue"] color {
background: #1997c8;
}
[color="blue"] color:before {
content: "#1997c8 (0%)";
}
[color="blue"] color[darken="22"] {
background: #13769c;
}
[color="blue"] color[darken="22"]:before {
content: "#13769c (-22%)";
}
[color="blue"] color[darken="44"] {
background: #0e5570;
}
[color="blue"] color[darken="44"]:before {
content: "#0e5570 (-44%)";
}
[color="blue"] color[darken="66"] {
background: #083344;
}
[color="blue"] color[darken="66"]:before {
content: "#083344 (-66%)";
}
[color="blue"] color[lighten="10"] {
background: #1caae1;
}
[color="blue"] color[lighten="10"]:before {
content: "#1caae1 (10%)";
}
[color="blue"] color[lighten="18"] {
background: #2fb2e5;
}
[color="blue"] color[lighten="18"]:before {
content: "#2fb2e5 (18%)";
}
[color="blue"] color[lighten="36"] {
background: #5dc3eb;
}
[color="blue"] color[lighten="36"]:before {
content: "#5dc3eb (36%)";
}
[color="blue"] color[lighten="54"] {
background: #8ad4f0;
}
[color="blue"] color[lighten="54"]:before {
content: "#8ad4f0 (54%)";
}
[color="blue"] color[lighten="72"] {
background: #b8e5f6;
}
[color="blue"] color[lighten="72"]:before {
content: "#b8e5f6 (72%)";
}
[color="blue"] color[lighten="40"] {
background: #67c7ec;
}
[color="blue"] color[lighten="40"]:before {
content: "#67c7ec (40%)";
}
[color="blue"] color[lighten="50"] {
background: #80d0ef;
}
[color="blue"] color[lighten="50"]:before {
content: "#80d0ef (50%)";
}
[color="blue"] color[lighten="60"] {
background: #9adaf2;
}
[color="blue"] color[lighten="60"]:before {
content: "#9adaf2 (60%)";
}
[color="blue"] color[lighten="70"] {
background: #b3e3f5;
}
[color="blue"] color[lighten="70"]:before {
content: "#b3e3f5 (70%)";
}
[color="blue"] color[lighten="80"] {
background: #ccecf9;
}
[color="blue"] color[lighten="80"]:before {
content: "#ccecf9 (80%)";
}
[color="blue"] color[lighten="89.5"] {
background: #e4f5fc;
}
[color="blue"] color[lighten="89.5"]:before {
content: "#e4f5fc (89.5%)";
}
[color="blue"] color[lighten="90"] {
background: #e6f6fc;
}
[color="blue"] color[lighten="90"]:before {
content: "#e6f6fc (90%)";
}
[color="blue"] color[lighten="95"] {
background: #f2fafd;
}
[color="blue"] color[lighten="95"]:before {
content: "#f2fafd (95%)";
}
[color="blue"] color[lighten="97"] {
background: #f7fcfe;
}
[color="blue"] color[lighten="97"]:before {
content: "#f7fcfe (97%)";
}
[color="green"] color {
background: #13aa37;
}
[color="green"] color:before {
content: "#13aa37 (0%)";
}
[color="green"] color[darken="22"] {
background: #0f852b;
}
[color="green"] color[darken="22"]:before {
content: "#0f852b (-22%)";
}
[color="green"] color[darken="44"] {
background: #0b5f1f;
}
[color="green"] color[darken="44"]:before {
content: "#0b5f1f (-44%)";
}
[color="green"] color[darken="66"] {
background: #063a13;
}
[color="green"] color[darken="66"]:before {
content: "#063a13 (-66%)";
}
[color="green"] color[lighten="10"] {
background: #16c740;
}
[color="green"] color[lighten="10"]:before {
content: "#16c740 (10%)";
}
[color="green"] color[lighten="18"] {
background: #19de48;
}
[color="green"] color[lighten="18"]:before {
content: "#19de48 (18%)";
}
[color="green"] color[lighten="36"] {
background: #46ea6d;
}
[color="green"] color[lighten="36"]:before {
content: "#46ea6d (36%)";
}
[color="green"] color[lighten="54"] {
background: #7af096;
}
[color="green"] color[lighten="54"]:before {
content: "#7af096 (54%)";
}
[color="green"] color[lighten="72"] {
background: #aef6bf;
}
[color="green"] color[lighten="72"]:before {
content: "#aef6bf (72%)";
}
[color="green"] color[lighten="40"] {
background: #52ec76;
}
[color="green"] color[lighten="40"]:before {
content: "#52ec76 (40%)";
}
[color="green"] color[lighten="50"] {
background: #6fef8d;
}
[color="green"] color[lighten="50"]:before {
content: "#6fef8d (50%)";
}
[color="green"] color[lighten="60"] {
background: #8cf2a4;
}
[color="green"] color[lighten="60"]:before {
content: "#8cf2a4 (60%)";
}
[color="green"] color[lighten="70"] {
background: #a8f5bb;
}
[color="green"] color[lighten="70"]:before {
content: "#a8f5bb (70%)";
}
[color="green"] color[lighten="80"] {
background: #c5f9d1;
}
[color="green"] color[lighten="80"]:before {
content: "#c5f9d1 (80%)";
}
[color="green"] color[lighten="89.5"] {
background: #e1fce7;
}
[color="green"] color[lighten="89.5"]:before {
content: "#e1fce7 (89.5%)";
}
[color="green"] color[lighten="90"] {
background: #e2fce8;
}
[color="green"] color[lighten="90"]:before {
content: "#e2fce8 (90%)";
}
[color="green"] color[lighten="95"] {
background: #f1fdf4;
}
[color="green"] color[lighten="95"]:before {
content: "#f1fdf4 (95%)";
}
[color="green"] color[lighten="97"] {
background: #f6fef8;
}
[color="green"] color[lighten="97"]:before {
content: "#f6fef8 (97%)";
}
[color="yellow"] color {
background: #eaa62f;
}
[color="yellow"] color:before {
content: "#eaa62f (0%)";
}
[color="yellow"] color[darken="22"] {
background: #c78614;
}
[color="yellow"] color[darken="22"]:before {
content: "#c78614 (-22%)";
}
[color="yellow"] color[darken="44"] {
background: #8f600e;
}
[color="yellow"] color[darken="44"]:before {
content: "#8f600e (-44%)";
}
[color="yellow"] color[darken="66"] {
background: #573a09;
}
[color="yellow"] color[darken="66"]:before {
content: "#573a09 (-66%)";
}
[color="yellow"] color[lighten="10"] {
background: #ecaf44;
}
[color="yellow"] color[lighten="10"]:before {
content: "#ecaf44 (10%)";
}
[color="yellow"] color[lighten="18"] {
background: #eeb654;
}
[color="yellow"] color[lighten="18"]:before {
content: "#eeb654 (18%)";
}
[color="yellow"] color[lighten="36"] {
background: #f2c67a;
}
[color="yellow"] color[lighten="36"]:before {
content: "#f2c67a (36%)";
}
[color="yellow"] color[lighten="54"] {
background: #f5d69f;
}
[color="yellow"] color[lighten="54"]:before {
content: "#f5d69f (54%)";
}
[color="yellow"] color[lighten="72"] {
background: #f9e6c5;
}
[color="yellow"] color[lighten="72"]:before {
content: "#f9e6c5 (72%)";
}
[color="yellow"] color[lighten="40"] {
background: #f2ca82;
}
[color="yellow"] color[lighten="40"]:before {
content: "#f2ca82 (40%)";
}
[color="yellow"] color[lighten="50"] {
background: #f5d397;
}
[color="yellow"] color[lighten="50"]:before {
content: "#f5d397 (50%)";
}
[color="yellow"] color[lighten="60"] {
background: #f7dbac;
}
[color="yellow"] color[lighten="60"]:before {
content: "#f7dbac (60%)";
}
[color="yellow"] color[lighten="70"] {
background: #f9e4c1;
}
[color="yellow"] color[lighten="70"]:before {
content: "#f9e4c1 (70%)";
}
[color="yellow"] color[lighten="80"] {
background: #fbedd5;
}
[color="yellow"] color[lighten="80"]:before {
content: "#fbedd5 (80%)";
}
[color="yellow"] color[lighten="89.5"] {
background: #fdf6e9;
}
[color="yellow"] color[lighten="89.5"]:before {
content: "#fdf6e9 (89.5%)";
}
[color="yellow"] color[lighten="90"] {
background: #fdf6ea;
}
[color="yellow"] color[lighten="90"]:before {
content: "#fdf6ea (90%)";
}
[color="yellow"] color[lighten="95"] {
background: #fefbf5;
}
[color="yellow"] color[lighten="95"]:before {
content: "#fefbf5 (95%)";
}
[color="yellow"] color[lighten="97"] {
background: #fefcf9;
}
[color="yellow"] color[lighten="97"]:before {
content: "#fefcf9 (97%)";
}
[color="red"] color {
background: #ea322f;
}
[color="red"] color:before {
content: "#ea322f (0%)";
}
[color="red"] color[darken="22"] {
background: #c71714;
}
[color="red"] color[darken="22"]:before {
content: "#c71714 (-22%)";
}
[color="red"] color[darken="44"] {
background: #8f100e;
}
[color="red"] color[darken="44"]:before {
content: "#8f100e (-44%)";
}
[color="red"] color[darken="66"] {
background: #570a09;
}
[color="red"] color[darken="66"]:before {
content: "#570a09 (-66%)";
}
[color="red"] color[lighten="10"] {
background: #ec4744;
}
[color="red"] color[lighten="10"]:before {
content: "#ec4744 (10%)";
}
[color="red"] color[lighten="18"] {
background: #ee5754;
}
[color="red"] color[lighten="18"]:before {
content: "#ee5754 (18%)";
}
[color="red"] color[lighten="36"] {
background: #f27c7a;
}
[color="red"] color[lighten="36"]:before {
content: "#f27c7a (36%)";
}
[color="red"] color[lighten="54"] {
background: #f5a19f;
}
[color="red"] color[lighten="54"]:before {
content: "#f5a19f (54%)";
}
[color="red"] color[lighten="72"] {
background: #f9c6c5;
}
[color="red"] color[lighten="72"]:before {
content: "#f9c6c5 (72%)";
}
[color="red"] color[lighten="40"] {
background: #f28482;
}
[color="red"] color[lighten="40"]:before {
content: "#f28482 (40%)";
}
[color="red"] color[lighten="50"] {
background: #f59897;
}
[color="red"] color[lighten="50"]:before {
content: "#f59897 (50%)";
}
[color="red"] color[lighten="60"] {
background: #f7adac;
}
[color="red"] color[lighten="60"]:before {
content: "#f7adac (60%)";
}
[color="red"] color[lighten="70"] {
background: #f9c2c1;
}
[color="red"] color[lighten="70"]:before {
content: "#f9c2c1 (70%)";
}
[color="red"] color[lighten="80"] {
background: #fbd6d5;
}
[color="red"] color[lighten="80"]:before {
content: "#fbd6d5 (80%)";
}
[color="red"] color[lighten="89.5"] {
background: #fde9e9;
}
[color="red"] color[lighten="89.5"]:before {
content: "#fde9e9 (89.5%)";
}
[color="red"] color[lighten="90"] {
background: #fdebea;
}
[color="red"] color[lighten="90"]:before {
content: "#fdebea (90%)";
}
[color="red"] color[lighten="95"] {
background: #fef5f5;
}
[color="red"] color[lighten="95"]:before {
content: "#fef5f5 (95%)";
}
[color="red"] color[lighten="97"] {
background: #fef9f9;
}
[color="red"] color[lighten="97"]:before {
content: "#fef9f9 (97%)";
}
* {
box-sizing: border-box;
margin: 0;
}
body {
display: table;
width: 100%;
padding: 20px;
}
swatch {
display: table-cell;
}
color {
color: white;
width: 100%;
display: block;
padding: 10px;
border: 1px solid #CCC;
margin: 4px 0;
}
color[lighten] {
color: black;
}
color[spacer] {
background: #EEE;
border-color: transparent;
text-indent: -999in;
}
Raw
SassMeister-rendered.html
<html>
<body>
<swatch color="black">
<color darken="66"></color>
<color darken="44"></color>
<color darken="22"></color>
<color></color>
<color lighten="18"></color>
<color lighten="36"></color>
<color lighten="54"></color>
<color lighten="72"></color>
<color lighten="90"></color>
<color lighten="95"></color>
<color lighten="97"></color>
</swatch>
<swatch color="blue">
<color spacer> </color>
<color spacer> </color>
<color darken="22"></color>
<color></color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color lighten="90"></color>
<color lighten="95"></color>
</swatch>
<swatch color="green">
<color spacer> </color>
<color spacer> </color>
<color darken="22"></color>
<color></color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color lighten="90"></color>
<color lighten="95"></color>
</swatch>
<swatch color="yellow">
<color spacer> </color>
<color spacer> </color>
<color darken="22"></color>
<color></color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color lighten="90"></color>
<color lighten="95"></color>
</swatch>
<swatch color="red">
<color spacer> </color>
<color spacer> </color>
<color darken="22"></color>
<color></color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color spacer> </color>
<color lighten="90"></color>
<color lighten="95"></color>
</swatch>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment