Skip to content

Instantly share code, notes, and snippets.

@syahrasi

syahrasi/SassMeister-input-HTML.haml

Created January 23, 2014 10:28
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save syahrasi/8576283 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.haml
- 4.times do |i|
%div{:class => "box cyan-box-#{i + 1}" }
- 25.times do |i|
%div{:class => "box blue-box-#{i + 1}" }
- 18.times do |i|
%div{:class => "box purple-box-#{i + 1}" }
- 6.times do |i|
%div{:class => "box pink-box-#{i + 1}" }
- 9.times do |i|
%div{:class => "box red-box-#{i + 1}" }
- 17.times do |i|
%div{:class => "box brown-box-#{i + 1}" }
- 6.times do |i|
%div{:class => "box orange-box-#{i + 1}" }
- 12.times do |i|
%div{:class => "box yellow-box-#{i + 1}" }
- 23.times do |i|
%div{:class => "box green-box-#{i + 1}" }
- 10.times do |i|
%div{:class => "box grey-box-#{i + 1}" }
- 17.times do |i|
%div{:class => "box white-box-#{i + 1}" }
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// ----
$blue: deepskyblue, blue, cyan, aquamarine, turquoise, mediumturquoise, aqua, paleturquoise, lightcyan, darkturquoise, cadetblue, powderblue, lightblue, skyblue, lightskyblue, steelblue, dodgerblue, lightsteelblue, cornflowerblue, royalblue, midnightblue, navy, darkblue, mediumblue, mediumslateblue;
$brown: maroon, brown, rosybrown, sienna, saddlebrown, chocolate, sandybrown, peru, bisque, burlywood, tan, navajowhite, blanchedalmond, wheat, darkgoldenrod, goldenrod, cornsilk;
$cyan: darkcyan, cyan, teal, lightcyan;
$grey: black, dimgray, gray, darkgray, silver, lightgrey, gainsboro, darkslategray, slategray, lightslategray;
$green: darkcyan, olive, olivedrab, yellowgreen, darkolivegreen, greenyellow, chartreuse, lawngreen, darkgreen, green, forestgreen, lime, limegreen, lightgreen, palegreen, darkseagreen, seagreen, mediumseagreen, springgreen, mediumspringgreen, mediumaquamarine, lightseagreen, teal;
$orange: tomato, orangered, coral, lightsalmon, darkorange, orange;
$pink: mediumvioletred, deeppink, hotpink, palevioletred, pink, lightpink;
$purple: magenta, lavender, darkslateblue, slateblue, mediumslateblue, mediumpurple, blueviolet, indigo, darkorchid, darkviolet, mediumorchid, purple, darkmagenta, fuchsia, violet, plum, thistle, orchid;
$red: darkred, firebrick, red, indianred, lightcoral, salmon, darksalmon, lightsalmon, crimson;
$white: whitesmoke, white, snow, mistyrose, seashell, linen, antiquewhite, oldlace, floralwhite, beige, ivory, honeydew, mintcream, azure, aliceblue, ghostwhite, lavenderblush;
$yellow: peachpuff, papayawhip, moccasin, goldenrod, gold, khaki, lemonchiffon, palegoldenrod, darkkhaki, yellow, lightgoldenrodyellow, lightyellow;
.box {
display: block;
width: 10%;
height: 50px;
float: left;
}
@mixin color-box($colors, $size, $class) {
@for $i from 1 through $size {
.#{$class}-#{$i} {
$color: nth($colors, $i);
background-color: $color;
&:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
@if lightness($color) < 50% {
color: white;
}
content: "#{$color}";
padding: 5px;
}
}
}
}
@include color-box($blue, 25, blue-box);
@include color-box($brown, 17, brown-box);
@include color-box($cyan, 4, cyan-box);
@include color-box($grey, 10, grey-box);
@include color-box($green, 23, green-box);
@include color-box($orange, 6, orange-box);
@include color-box($pink, 6, pink-box);
@include color-box($red, 9, red-box);
@include color-box($purple, 18, purple-box);
@include color-box($white, 17, white-box);
@include color-box($yellow, 12, yellow-box);
Raw
SassMeister-output.css
.box {
display: block;
width: 10%;
height: 50px;
float: left;
}
.blue-box-1 {
background-color: deepskyblue;
}
.blue-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "deepskyblue";
padding: 5px;
}
.blue-box-2 {
background-color: blue;
}
.blue-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "blue";
padding: 5px;
}
.blue-box-3 {
background-color: cyan;
}
.blue-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "cyan";
padding: 5px;
}
.blue-box-4 {
background-color: aquamarine;
}
.blue-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "aquamarine";
padding: 5px;
}
.blue-box-5 {
background-color: turquoise;
}
.blue-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "turquoise";
padding: 5px;
}
.blue-box-6 {
background-color: mediumturquoise;
}
.blue-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "mediumturquoise";
padding: 5px;
}
.blue-box-7 {
background-color: cyan;
}
.blue-box-7:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "cyan";
padding: 5px;
}
.blue-box-8 {
background-color: paleturquoise;
}
.blue-box-8:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "paleturquoise";
padding: 5px;
}
.blue-box-9 {
background-color: lightcyan;
}
.blue-box-9:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightcyan";
padding: 5px;
}
.blue-box-10 {
background-color: darkturquoise;
}
.blue-box-10:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkturquoise";
padding: 5px;
}
.blue-box-11 {
background-color: cadetblue;
}
.blue-box-11:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "cadetblue";
padding: 5px;
}
.blue-box-12 {
background-color: powderblue;
}
.blue-box-12:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "powderblue";
padding: 5px;
}
.blue-box-13 {
background-color: lightblue;
}
.blue-box-13:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightblue";
padding: 5px;
}
.blue-box-14 {
background-color: skyblue;
}
.blue-box-14:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "skyblue";
padding: 5px;
}
.blue-box-15 {
background-color: lightskyblue;
}
.blue-box-15:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightskyblue";
padding: 5px;
}
.blue-box-16 {
background-color: steelblue;
}
.blue-box-16:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "steelblue";
padding: 5px;
}
.blue-box-17 {
background-color: dodgerblue;
}
.blue-box-17:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "dodgerblue";
padding: 5px;
}
.blue-box-18 {
background-color: lightsteelblue;
}
.blue-box-18:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightsteelblue";
padding: 5px;
}
.blue-box-19 {
background-color: cornflowerblue;
}
.blue-box-19:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "cornflowerblue";
padding: 5px;
}
.blue-box-20 {
background-color: royalblue;
}
.blue-box-20:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "royalblue";
padding: 5px;
}
.blue-box-21 {
background-color: midnightblue;
}
.blue-box-21:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "midnightblue";
padding: 5px;
}
.blue-box-22 {
background-color: navy;
}
.blue-box-22:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "navy";
padding: 5px;
}
.blue-box-23 {
background-color: darkblue;
}
.blue-box-23:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkblue";
padding: 5px;
}
.blue-box-24 {
background-color: mediumblue;
}
.blue-box-24:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "mediumblue";
padding: 5px;
}
.blue-box-25 {
background-color: mediumslateblue;
}
.blue-box-25:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "mediumslateblue";
padding: 5px;
}
.brown-box-1 {
background-color: maroon;
}
.brown-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "maroon";
padding: 5px;
}
.brown-box-2 {
background-color: brown;
}
.brown-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "brown";
padding: 5px;
}
.brown-box-3 {
background-color: rosybrown;
}
.brown-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "rosybrown";
padding: 5px;
}
.brown-box-4 {
background-color: sienna;
}
.brown-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "sienna";
padding: 5px;
}
.brown-box-5 {
background-color: saddlebrown;
}
.brown-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "saddlebrown";
padding: 5px;
}
.brown-box-6 {
background-color: chocolate;
}
.brown-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "chocolate";
padding: 5px;
}
.brown-box-7 {
background-color: sandybrown;
}
.brown-box-7:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "sandybrown";
padding: 5px;
}
.brown-box-8 {
background-color: peru;
}
.brown-box-8:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "peru";
padding: 5px;
}
.brown-box-9 {
background-color: bisque;
}
.brown-box-9:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "bisque";
padding: 5px;
}
.brown-box-10 {
background-color: burlywood;
}
.brown-box-10:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "burlywood";
padding: 5px;
}
.brown-box-11 {
background-color: tan;
}
.brown-box-11:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "tan";
padding: 5px;
}
.brown-box-12 {
background-color: navajowhite;
}
.brown-box-12:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "navajowhite";
padding: 5px;
}
.brown-box-13 {
background-color: blanchedalmond;
}
.brown-box-13:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "blanchedalmond";
padding: 5px;
}
.brown-box-14 {
background-color: wheat;
}
.brown-box-14:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "wheat";
padding: 5px;
}
.brown-box-15 {
background-color: darkgoldenrod;
}
.brown-box-15:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkgoldenrod";
padding: 5px;
}
.brown-box-16 {
background-color: goldenrod;
}
.brown-box-16:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "goldenrod";
padding: 5px;
}
.brown-box-17 {
background-color: cornsilk;
}
.brown-box-17:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "cornsilk";
padding: 5px;
}
.cyan-box-1 {
background-color: darkcyan;
}
.cyan-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkcyan";
padding: 5px;
}
.cyan-box-2 {
background-color: cyan;
}
.cyan-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "cyan";
padding: 5px;
}
.cyan-box-3 {
background-color: teal;
}
.cyan-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "teal";
padding: 5px;
}
.cyan-box-4 {
background-color: lightcyan;
}
.cyan-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightcyan";
padding: 5px;
}
.grey-box-1 {
background-color: black;
}
.grey-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "black";
padding: 5px;
}
.grey-box-2 {
background-color: dimgrey;
}
.grey-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "dimgrey";
padding: 5px;
}
.grey-box-3 {
background-color: gray;
}
.grey-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "gray";
padding: 5px;
}
.grey-box-4 {
background-color: darkgrey;
}
.grey-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "darkgrey";
padding: 5px;
}
.grey-box-5 {
background-color: silver;
}
.grey-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "silver";
padding: 5px;
}
.grey-box-6 {
background-color: lightgrey;
}
.grey-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightgrey";
padding: 5px;
}
.grey-box-7 {
background-color: gainsboro;
}
.grey-box-7:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "gainsboro";
padding: 5px;
}
.grey-box-8 {
background-color: darkslategrey;
}
.grey-box-8:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkslategrey";
padding: 5px;
}
.grey-box-9 {
background-color: slategrey;
}
.grey-box-9:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "slategrey";
padding: 5px;
}
.grey-box-10 {
background-color: lightslategrey;
}
.grey-box-10:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightslategrey";
padding: 5px;
}
.green-box-1 {
background-color: darkcyan;
}
.green-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkcyan";
padding: 5px;
}
.green-box-2 {
background-color: olive;
}
.green-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "olive";
padding: 5px;
}
.green-box-3 {
background-color: olivedrab;
}
.green-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "olivedrab";
padding: 5px;
}
.green-box-4 {
background-color: yellowgreen;
}
.green-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "yellowgreen";
padding: 5px;
}
.green-box-5 {
background-color: darkolivegreen;
}
.green-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkolivegreen";
padding: 5px;
}
.green-box-6 {
background-color: greenyellow;
}
.green-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "greenyellow";
padding: 5px;
}
.green-box-7 {
background-color: chartreuse;
}
.green-box-7:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "chartreuse";
padding: 5px;
}
.green-box-8 {
background-color: lawngreen;
}
.green-box-8:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "lawngreen";
padding: 5px;
}
.green-box-9 {
background-color: darkgreen;
}
.green-box-9:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkgreen";
padding: 5px;
}
.green-box-10 {
background-color: green;
}
.green-box-10:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "green";
padding: 5px;
}
.green-box-11 {
background-color: forestgreen;
}
.green-box-11:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "forestgreen";
padding: 5px;
}
.green-box-12 {
background-color: lime;
}
.green-box-12:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lime";
padding: 5px;
}
.green-box-13 {
background-color: limegreen;
}
.green-box-13:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "limegreen";
padding: 5px;
}
.green-box-14 {
background-color: lightgreen;
}
.green-box-14:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightgreen";
padding: 5px;
}
.green-box-15 {
background-color: palegreen;
}
.green-box-15:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "palegreen";
padding: 5px;
}
.green-box-16 {
background-color: darkseagreen;
}
.green-box-16:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "darkseagreen";
padding: 5px;
}
.green-box-17 {
background-color: seagreen;
}
.green-box-17:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "seagreen";
padding: 5px;
}
.green-box-18 {
background-color: mediumseagreen;
}
.green-box-18:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "mediumseagreen";
padding: 5px;
}
.green-box-19 {
background-color: springgreen;
}
.green-box-19:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "springgreen";
padding: 5px;
}
.green-box-20 {
background-color: mediumspringgreen;
}
.green-box-20:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "mediumspringgreen";
padding: 5px;
}
.green-box-21 {
background-color: mediumaquamarine;
}
.green-box-21:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "mediumaquamarine";
padding: 5px;
}
.green-box-22 {
background-color: lightseagreen;
}
.green-box-22:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "lightseagreen";
padding: 5px;
}
.green-box-23 {
background-color: teal;
}
.green-box-23:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "teal";
padding: 5px;
}
.orange-box-1 {
background-color: tomato;
}
.orange-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "tomato";
padding: 5px;
}
.orange-box-2 {
background-color: orangered;
}
.orange-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "orangered";
padding: 5px;
}
.orange-box-3 {
background-color: coral;
}
.orange-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "coral";
padding: 5px;
}
.orange-box-4 {
background-color: lightsalmon;
}
.orange-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightsalmon";
padding: 5px;
}
.orange-box-5 {
background-color: darkorange;
}
.orange-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "darkorange";
padding: 5px;
}
.orange-box-6 {
background-color: orange;
}
.orange-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "orange";
padding: 5px;
}
.pink-box-1 {
background-color: mediumvioletred;
}
.pink-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "mediumvioletred";
padding: 5px;
}
.pink-box-2 {
background-color: deeppink;
}
.pink-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "deeppink";
padding: 5px;
}
.pink-box-3 {
background-color: hotpink;
}
.pink-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "hotpink";
padding: 5px;
}
.pink-box-4 {
background-color: palevioletred;
}
.pink-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "palevioletred";
padding: 5px;
}
.pink-box-5 {
background-color: pink;
}
.pink-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "pink";
padding: 5px;
}
.pink-box-6 {
background-color: lightpink;
}
.pink-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightpink";
padding: 5px;
}
.red-box-1 {
background-color: darkred;
}
.red-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkred";
padding: 5px;
}
.red-box-2 {
background-color: firebrick;
}
.red-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "firebrick";
padding: 5px;
}
.red-box-3 {
background-color: red;
}
.red-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "red";
padding: 5px;
}
.red-box-4 {
background-color: indianred;
}
.red-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "indianred";
padding: 5px;
}
.red-box-5 {
background-color: lightcoral;
}
.red-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightcoral";
padding: 5px;
}
.red-box-6 {
background-color: salmon;
}
.red-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "salmon";
padding: 5px;
}
.red-box-7 {
background-color: darksalmon;
}
.red-box-7:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "darksalmon";
padding: 5px;
}
.red-box-8 {
background-color: lightsalmon;
}
.red-box-8:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightsalmon";
padding: 5px;
}
.red-box-9 {
background-color: crimson;
}
.red-box-9:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "crimson";
padding: 5px;
}
.purple-box-1 {
background-color: magenta;
}
.purple-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "magenta";
padding: 5px;
}
.purple-box-2 {
background-color: lavender;
}
.purple-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lavender";
padding: 5px;
}
.purple-box-3 {
background-color: darkslateblue;
}
.purple-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkslateblue";
padding: 5px;
}
.purple-box-4 {
background-color: slateblue;
}
.purple-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "slateblue";
padding: 5px;
}
.purple-box-5 {
background-color: mediumslateblue;
}
.purple-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "mediumslateblue";
padding: 5px;
}
.purple-box-6 {
background-color: mediumpurple;
}
.purple-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "mediumpurple";
padding: 5px;
}
.purple-box-7 {
background-color: blueviolet;
}
.purple-box-7:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "blueviolet";
padding: 5px;
}
.purple-box-8 {
background-color: indigo;
}
.purple-box-8:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "indigo";
padding: 5px;
}
.purple-box-9 {
background-color: darkorchid;
}
.purple-box-9:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkorchid";
padding: 5px;
}
.purple-box-10 {
background-color: darkviolet;
}
.purple-box-10:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkviolet";
padding: 5px;
}
.purple-box-11 {
background-color: mediumorchid;
}
.purple-box-11:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "mediumorchid";
padding: 5px;
}
.purple-box-12 {
background-color: purple;
}
.purple-box-12:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "purple";
padding: 5px;
}
.purple-box-13 {
background-color: darkmagenta;
}
.purple-box-13:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "darkmagenta";
padding: 5px;
}
.purple-box-14 {
background-color: magenta;
}
.purple-box-14:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "magenta";
padding: 5px;
}
.purple-box-15 {
background-color: violet;
}
.purple-box-15:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "violet";
padding: 5px;
}
.purple-box-16 {
background-color: plum;
}
.purple-box-16:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "plum";
padding: 5px;
}
.purple-box-17 {
background-color: thistle;
}
.purple-box-17:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "thistle";
padding: 5px;
}
.purple-box-18 {
background-color: orchid;
}
.purple-box-18:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "orchid";
padding: 5px;
}
.white-box-1 {
background-color: whitesmoke;
}
.white-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "whitesmoke";
padding: 5px;
}
.white-box-2 {
background-color: white;
}
.white-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "white";
padding: 5px;
}
.white-box-3 {
background-color: snow;
}
.white-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "snow";
padding: 5px;
}
.white-box-4 {
background-color: mistyrose;
}
.white-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "mistyrose";
padding: 5px;
}
.white-box-5 {
background-color: seashell;
}
.white-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "seashell";
padding: 5px;
}
.white-box-6 {
background-color: linen;
}
.white-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "linen";
padding: 5px;
}
.white-box-7 {
background-color: antiquewhite;
}
.white-box-7:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "antiquewhite";
padding: 5px;
}
.white-box-8 {
background-color: oldlace;
}
.white-box-8:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "oldlace";
padding: 5px;
}
.white-box-9 {
background-color: floralwhite;
}
.white-box-9:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "floralwhite";
padding: 5px;
}
.white-box-10 {
background-color: beige;
}
.white-box-10:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "beige";
padding: 5px;
}
.white-box-11 {
background-color: ivory;
}
.white-box-11:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "ivory";
padding: 5px;
}
.white-box-12 {
background-color: honeydew;
}
.white-box-12:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "honeydew";
padding: 5px;
}
.white-box-13 {
background-color: mintcream;
}
.white-box-13:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "mintcream";
padding: 5px;
}
.white-box-14 {
background-color: azure;
}
.white-box-14:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "azure";
padding: 5px;
}
.white-box-15 {
background-color: aliceblue;
}
.white-box-15:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "aliceblue";
padding: 5px;
}
.white-box-16 {
background-color: ghostwhite;
}
.white-box-16:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "ghostwhite";
padding: 5px;
}
.white-box-17 {
background-color: lavenderblush;
}
.white-box-17:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lavenderblush";
padding: 5px;
}
.yellow-box-1 {
background-color: peachpuff;
}
.yellow-box-1:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "peachpuff";
padding: 5px;
}
.yellow-box-2 {
background-color: papayawhip;
}
.yellow-box-2:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "papayawhip";
padding: 5px;
}
.yellow-box-3 {
background-color: moccasin;
}
.yellow-box-3:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "moccasin";
padding: 5px;
}
.yellow-box-4 {
background-color: goldenrod;
}
.yellow-box-4:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
color: white;
content: "goldenrod";
padding: 5px;
}
.yellow-box-5 {
background-color: gold;
}
.yellow-box-5:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "gold";
padding: 5px;
}
.yellow-box-6 {
background-color: khaki;
}
.yellow-box-6:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "khaki";
padding: 5px;
}
.yellow-box-7 {
background-color: lemonchiffon;
}
.yellow-box-7:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lemonchiffon";
padding: 5px;
}
.yellow-box-8 {
background-color: palegoldenrod;
}
.yellow-box-8:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "palegoldenrod";
padding: 5px;
}
.yellow-box-9 {
background-color: darkkhaki;
}
.yellow-box-9:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "darkkhaki";
padding: 5px;
}
.yellow-box-10 {
background-color: yellow;
}
.yellow-box-10:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "yellow";
padding: 5px;
}
.yellow-box-11 {
background-color: lightgoldenrodyellow;
}
.yellow-box-11:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightgoldenrodyellow";
padding: 5px;
}
.yellow-box-12 {
background-color: lightyellow;
}
.yellow-box-12:after {
font-size: 0.8em;
font-family: sans-serif;
display: block;
content: "lightyellow";
padding: 5px;
}
Raw
SassMeister-rendered.html
<div class='box cyan-box-1'></div>
<div class='box cyan-box-2'></div>
<div class='box cyan-box-3'></div>
<div class='box cyan-box-4'></div>
<div class='box blue-box-1'></div>
<div class='box blue-box-2'></div>
<div class='box blue-box-3'></div>
<div class='box blue-box-4'></div>
<div class='box blue-box-5'></div>
<div class='box blue-box-6'></div>
<div class='box blue-box-7'></div>
<div class='box blue-box-8'></div>
<div class='box blue-box-9'></div>
<div class='box blue-box-10'></div>
<div class='box blue-box-11'></div>
<div class='box blue-box-12'></div>
<div class='box blue-box-13'></div>
<div class='box blue-box-14'></div>
<div class='box blue-box-15'></div>
<div class='box blue-box-16'></div>
<div class='box blue-box-17'></div>
<div class='box blue-box-18'></div>
<div class='box blue-box-19'></div>
<div class='box blue-box-20'></div>
<div class='box blue-box-21'></div>
<div class='box blue-box-22'></div>
<div class='box blue-box-23'></div>
<div class='box blue-box-24'></div>
<div class='box blue-box-25'></div>
<div class='box purple-box-1'></div>
<div class='box purple-box-2'></div>
<div class='box purple-box-3'></div>
<div class='box purple-box-4'></div>
<div class='box purple-box-5'></div>
<div class='box purple-box-6'></div>
<div class='box purple-box-7'></div>
<div class='box purple-box-8'></div>
<div class='box purple-box-9'></div>
<div class='box purple-box-10'></div>
<div class='box purple-box-11'></div>
<div class='box purple-box-12'></div>
<div class='box purple-box-13'></div>
<div class='box purple-box-14'></div>
<div class='box purple-box-15'></div>
<div class='box purple-box-16'></div>
<div class='box purple-box-17'></div>
<div class='box purple-box-18'></div>
<div class='box pink-box-1'></div>
<div class='box pink-box-2'></div>
<div class='box pink-box-3'></div>
<div class='box pink-box-4'></div>
<div class='box pink-box-5'></div>
<div class='box pink-box-6'></div>
<div class='box red-box-1'></div>
<div class='box red-box-2'></div>
<div class='box red-box-3'></div>
<div class='box red-box-4'></div>
<div class='box red-box-5'></div>
<div class='box red-box-6'></div>
<div class='box red-box-7'></div>
<div class='box red-box-8'></div>
<div class='box red-box-9'></div>
<div class='box brown-box-1'></div>
<div class='box brown-box-2'></div>
<div class='box brown-box-3'></div>
<div class='box brown-box-4'></div>
<div class='box brown-box-5'></div>
<div class='box brown-box-6'></div>
<div class='box brown-box-7'></div>
<div class='box brown-box-8'></div>
<div class='box brown-box-9'></div>
<div class='box brown-box-10'></div>
<div class='box brown-box-11'></div>
<div class='box brown-box-12'></div>
<div class='box brown-box-13'></div>
<div class='box brown-box-14'></div>
<div class='box brown-box-15'></div>
<div class='box brown-box-16'></div>
<div class='box brown-box-17'></div>
<div class='box orange-box-1'></div>
<div class='box orange-box-2'></div>
<div class='box orange-box-3'></div>
<div class='box orange-box-4'></div>
<div class='box orange-box-5'></div>
<div class='box orange-box-6'></div>
<div class='box yellow-box-1'></div>
<div class='box yellow-box-2'></div>
<div class='box yellow-box-3'></div>
<div class='box yellow-box-4'></div>
<div class='box yellow-box-5'></div>
<div class='box yellow-box-6'></div>
<div class='box yellow-box-7'></div>
<div class='box yellow-box-8'></div>
<div class='box yellow-box-9'></div>
<div class='box yellow-box-10'></div>
<div class='box yellow-box-11'></div>
<div class='box yellow-box-12'></div>
<div class='box green-box-1'></div>
<div class='box green-box-2'></div>
<div class='box green-box-3'></div>
<div class='box green-box-4'></div>
<div class='box green-box-5'></div>
<div class='box green-box-6'></div>
<div class='box green-box-7'></div>
<div class='box green-box-8'></div>
<div class='box green-box-9'></div>
<div class='box green-box-10'></div>
<div class='box green-box-11'></div>
<div class='box green-box-12'></div>
<div class='box green-box-13'></div>
<div class='box green-box-14'></div>
<div class='box green-box-15'></div>
<div class='box green-box-16'></div>
<div class='box green-box-17'></div>
<div class='box green-box-18'></div>
<div class='box green-box-19'></div>
<div class='box green-box-20'></div>
<div class='box green-box-21'></div>
<div class='box green-box-22'></div>
<div class='box green-box-23'></div>
<div class='box grey-box-1'></div>
<div class='box grey-box-2'></div>
<div class='box grey-box-3'></div>
<div class='box grey-box-4'></div>
<div class='box grey-box-5'></div>
<div class='box grey-box-6'></div>
<div class='box grey-box-7'></div>
<div class='box grey-box-8'></div>
<div class='box grey-box-9'></div>
<div class='box grey-box-10'></div>
<div class='box white-box-1'></div>
<div class='box white-box-2'></div>
<div class='box white-box-3'></div>
<div class='box white-box-4'></div>
<div class='box white-box-5'></div>
<div class='box white-box-6'></div>
<div class='box white-box-7'></div>
<div class='box white-box-8'></div>
<div class='box white-box-9'></div>
<div class='box white-box-10'></div>
<div class='box white-box-11'></div>
<div class='box white-box-12'></div>
<div class='box white-box-13'></div>
<div class='box white-box-14'></div>
<div class='box white-box-15'></div>
<div class='box white-box-16'></div>
<div class='box white-box-17'></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment