Skip to content

Instantly share code, notes, and snippets.

/SassMeister-input-HTML.html

Created April 13, 2015 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/93cd0be729e54a750c29 to your computer and use it in GitHub Desktop.
Save anonymous/93cd0be729e54a750c29 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<body>
<swatch color="black">
<color darken="27"></color>
<color></color>
<color lighten="90"></color>
<color lighten="97"></color>
</swatch>
<swatch color="blue">
<color darken="27"></color>
<color></color>
<color lighten="90"></color>
<color lighten="97"></color>
</swatch>
<swatch color="green">
<color darken="27"></color>
<color></color>
<color lighten="97"></color>
</swatch>
<swatch color="yellow">
<color darken="27"></color>
<color></color>
<color lighten="97"></color>
</swatch>
<swatch color="red">
<color darken="27"></color>
<color></color>
<color lighten="97"></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="27"] { @include swatch($clr, -27%); }
color[lighten="90"] { @include swatch($clr, 89.5%); }
color[lighten="97"] { @include swatch($clr, 97%); }
}
[color="black"] { @include swatch-group(#505c62); }
[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; }
Raw
SassMeister-output.css
[color="black"] color { background: #505c62; }
[color="black"] color:before { content: "#505c62 (0%)"; }
[color="black"] color[darken="27"] { background: #3a4348; }
[color="black"] color[darken="27"]:before { content: "#3a4348 (-27%)"; }
[color="black"] color[lighten="90"] { background: #eceeef; }
[color="black"] color[lighten="90"]:before { content: "#eceeef (89.5%)"; }
[color="black"] color[lighten="97"] { background: #fafafb; }
[color="black"] color[lighten="97"]:before { content: "#fafafb (97%)"; }
[color="blue"] color { background: #1997c8; }
[color="blue"] color:before { content: "#1997c8 (0%)"; }
[color="blue"] color[darken="27"] { background: #126e92; }
[color="blue"] color[darken="27"]:before { content: "#126e92 (-27%)"; }
[color="blue"] color[lighten="90"] { background: #e4f5fc; }
[color="blue"] color[lighten="90"]:before { content: "#e4f5fc (89.5%)"; }
[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="27"] { background: #0e7c28; }
[color="green"] color[darken="27"]:before { content: "#0e7c28 (-27%)"; }
[color="green"] color[lighten="90"] { background: #e1fce7; }
[color="green"] color[lighten="90"]:before { content: "#e1fce7 (89.5%)"; }
[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="27"] { background: #ba7d13; }
[color="yellow"] color[darken="27"]:before { content: "#ba7d13 (-27%)"; }
[color="yellow"] color[lighten="90"] { background: #fdf6e9; }
[color="yellow"] color[lighten="90"]:before { content: "#fdf6e9 (89.5%)"; }
[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="27"] { background: #ba1513; }
[color="red"] color[darken="27"]:before { content: "#ba1513 (-27%)"; }
[color="red"] color[lighten="90"] { background: #fde9e9; }
[color="red"] color[lighten="90"]:before { content: "#fde9e9 (89.5%)"; }
[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; }
Raw
SassMeister-rendered.html
<html>
<body>
<swatch color="black">
<color darken="27"></color>
<color></color>
<color lighten="90"></color>
<color lighten="97"></color>
</swatch>
<swatch color="blue">
<color darken="27"></color>
<color></color>
<color lighten="90"></color>
<color lighten="97"></color>
</swatch>
<swatch color="green">
<color darken="27"></color>
<color></color>
<color lighten="97"></color>
</swatch>
<swatch color="yellow">
<color darken="27"></color>
<color></color>
<color lighten="97"></color>
</swatch>
<swatch color="red">
<color darken="27"></color>
<color></color>
<color lighten="97"></color>
</swatch>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment