Skip to content

Instantly share code, notes, and snippets.

@mistergraphx

mistergraphx/SassMeister-input-HTML.html

Created November 13, 2014 13:35
Show Gist options
  • Save mistergraphx/b29755fa1e03628f63bc to your computer and use it in GitHub Desktop.
Save mistergraphx/b29755fa1e03628f63bc to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<h2>ALTERNATE_COLOR_NAMES</h2>
<ul class="alternate-color-name">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h2>COLOR_NAMES</h2>
<ul class="color-names">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Raw
SassMeister-input.scss
// ----
// libsass (v3.0.1)
// ----
// https://github.com/sass/sass/blob/stable/lib/sass/script/value/color.rb#L28-L180
// http://pankajparashar.com/posts/random-colors-sass/
// ALTERNATE_COLOR_NAMES
$alternate-color-name : (
aqua,
darkgrey,
darkslategrey,
dimgrey,
fuchsia,
grey,
lightgrey,
lightslategrey,
slategrey
);
// A hash from color names to `[red, green, blue]` value arrays.
// COLOR_NAMES
$color-names : (
aliceblue,
antiquewhite,
aquamarine,
azure,
beige,
bisque,
black,
blanchedalmond,
blue,
blueviolet,
brown,
burlywood,
cadetblue,
chartreuse,
chocolate,
coral,
cornflowerblue,
cornsilk,
crimson,
cyan,
darkblue,
darkcyan,
darkgoldenrod,
darkgray,
darkgreen,
darkkhaki,
darkmagenta,
darkolivegreen,
darkorange,
darkorchid,
darkred,
darksalmon,
darkseagreen,
darkslateblue,
darkslategray,
darkturquoise,
darkviolet,
deeppink,
deepskyblue,
dimgray,
dodgerblue,
firebrick,
floralwhite,
forestgreen,
gainsboro,
ghostwhite,
gold,
goldenrod,
gray,
green,
greenyellow,
honeydew,
hotpink,
indianred,
indigo,
ivory,
khaki,
lavender,
lavenderblush,
lawngreen,
lemonchiffon,
lightblue,
lightcoral,
lightcyan,
lightgoldenrodyellow,
lightgreen,
lightgray,
lightpink,
lightsalmon,
lightseagreen,
lightskyblue,
lightslategray,
lightsteelblue,
lightyellow,
lime,
limegreen,
linen,
magenta,
maroon,
mediumaquamarine,
mediumblue,
mediumorchid,
mediumpurple,
mediumseagreen,
mediumslateblue,
mediumspringgreen,
mediumturquoise,
mediumvioletred,
midnightblue,
mintcream,
mistyrose,
moccasin,
navajowhite,
navy,
oldlace,
olive,
olivedrab,
orange,
orangered,
orchid,
palegoldenrod,
palegreen,
paleturquoise,
palevioletred,
papayawhip,
peachpuff,
peru,
pink,
plum,
powderblue,
purple,
red,
rebeccapurple,
rosybrown,
royalblue,
saddlebrown,
salmon,
sandybrown,
seagreen,
seashell,
sienna,
silver,
skyblue,
slateblue,
slategray,
snow,
springgreen,
steelblue,
tan,
teal,
thistle,
tomato,
transparent,
turquoise,
violet,
wheat,
white,
whitesmoke,
yellow,
yellowgreen
);
// http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/
// http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-directive
@mixin colourize($list-of-colors){
$i:1;
@each $color in $list-of-colors {
&:nth-child(#{$i}){
background-color: $color;
&:after{
content: '#{$color}';
display:block;
text-align:center;
}
}
$i: $i+1;
}
}
%swatch {
clear: both;
float: left;
max-width: 640px;
li {
border: 1px solid black;
border-radius: 8px;
float: left;
height: 120px;
list-style: none;
margin: 0 4px 4px 0;
width: 120px;
}
}
.alternate-color-name {
@extend %swatch;
li{
@include colourize($alternate-color-name);
}
}
.color-names {
@extend %swatch;
li{
@include colourize($color-names);
}
}
Raw
SassMeister-output.css
.alternate-color-name, .color-names {
clear: both;
float: left;
max-width: 640px; }
.alternate-color-name li, .color-names li {
border: 1px solid black;
border-radius: 8px;
float: left;
height: 120px;
list-style: none;
margin: 0 4px 4px 0;
width: 120px; }
.alternate-color-name li:nth-child(1) {
background-color: aqua; }
.alternate-color-name li:nth-child(1):after {
content: 'aqua';
display: block;
text-align: center; }
.alternate-color-name li:nth-child(2) {
background-color: darkgrey; }
.alternate-color-name li:nth-child(2):after {
content: 'darkgrey';
display: block;
text-align: center; }
.alternate-color-name li:nth-child(3) {
background-color: darkslategrey; }
.alternate-color-name li:nth-child(3):after {
content: 'darkslategrey';
display: block;
text-align: center; }
.alternate-color-name li:nth-child(4) {
background-color: dimgrey; }
.alternate-color-name li:nth-child(4):after {
content: 'dimgrey';
display: block;
text-align: center; }
.alternate-color-name li:nth-child(5) {
background-color: fuchsia; }
.alternate-color-name li:nth-child(5):after {
content: 'fuchsia';
display: block;
text-align: center; }
.alternate-color-name li:nth-child(6) {
background-color: grey; }
.alternate-color-name li:nth-child(6):after {
content: 'grey';
display: block;
text-align: center; }
.alternate-color-name li:nth-child(7) {
background-color: lightgrey; }
.alternate-color-name li:nth-child(7):after {
content: 'lightgrey';
display: block;
text-align: center; }
.alternate-color-name li:nth-child(8) {
background-color: lightslategrey; }
.alternate-color-name li:nth-child(8):after {
content: 'lightslategrey';
display: block;
text-align: center; }
.alternate-color-name li:nth-child(9) {
background-color: slategrey; }
.alternate-color-name li:nth-child(9):after {
content: 'slategrey';
display: block;
text-align: center; }
.color-names li:nth-child(1) {
background-color: aliceblue; }
.color-names li:nth-child(1):after {
content: 'aliceblue';
display: block;
text-align: center; }
.color-names li:nth-child(2) {
background-color: antiquewhite; }
.color-names li:nth-child(2):after {
content: 'antiquewhite';
display: block;
text-align: center; }
.color-names li:nth-child(3) {
background-color: aquamarine; }
.color-names li:nth-child(3):after {
content: 'aquamarine';
display: block;
text-align: center; }
.color-names li:nth-child(4) {
background-color: azure; }
.color-names li:nth-child(4):after {
content: 'azure';
display: block;
text-align: center; }
.color-names li:nth-child(5) {
background-color: beige; }
.color-names li:nth-child(5):after {
content: 'beige';
display: block;
text-align: center; }
.color-names li:nth-child(6) {
background-color: bisque; }
.color-names li:nth-child(6):after {
content: 'bisque';
display: block;
text-align: center; }
.color-names li:nth-child(7) {
background-color: black; }
.color-names li:nth-child(7):after {
content: 'black';
display: block;
text-align: center; }
.color-names li:nth-child(8) {
background-color: blanchedalmond; }
.color-names li:nth-child(8):after {
content: 'blanchedalmond';
display: block;
text-align: center; }
.color-names li:nth-child(9) {
background-color: blue; }
.color-names li:nth-child(9):after {
content: 'blue';
display: block;
text-align: center; }
.color-names li:nth-child(10) {
background-color: blueviolet; }
.color-names li:nth-child(10):after {
content: 'blueviolet';
display: block;
text-align: center; }
.color-names li:nth-child(11) {
background-color: brown; }
.color-names li:nth-child(11):after {
content: 'brown';
display: block;
text-align: center; }
.color-names li:nth-child(12) {
background-color: burlywood; }
.color-names li:nth-child(12):after {
content: 'burlywood';
display: block;
text-align: center; }
.color-names li:nth-child(13) {
background-color: cadetblue; }
.color-names li:nth-child(13):after {
content: 'cadetblue';
display: block;
text-align: center; }
.color-names li:nth-child(14) {
background-color: chartreuse; }
.color-names li:nth-child(14):after {
content: 'chartreuse';
display: block;
text-align: center; }
.color-names li:nth-child(15) {
background-color: chocolate; }
.color-names li:nth-child(15):after {
content: 'chocolate';
display: block;
text-align: center; }
.color-names li:nth-child(16) {
background-color: coral; }
.color-names li:nth-child(16):after {
content: 'coral';
display: block;
text-align: center; }
.color-names li:nth-child(17) {
background-color: cornflowerblue; }
.color-names li:nth-child(17):after {
content: 'cornflowerblue';
display: block;
text-align: center; }
.color-names li:nth-child(18) {
background-color: cornsilk; }
.color-names li:nth-child(18):after {
content: 'cornsilk';
display: block;
text-align: center; }
.color-names li:nth-child(19) {
background-color: crimson; }
.color-names li:nth-child(19):after {
content: 'crimson';
display: block;
text-align: center; }
.color-names li:nth-child(20) {
background-color: cyan; }
.color-names li:nth-child(20):after {
content: 'cyan';
display: block;
text-align: center; }
.color-names li:nth-child(21) {
background-color: darkblue; }
.color-names li:nth-child(21):after {
content: 'darkblue';
display: block;
text-align: center; }
.color-names li:nth-child(22) {
background-color: darkcyan; }
.color-names li:nth-child(22):after {
content: 'darkcyan';
display: block;
text-align: center; }
.color-names li:nth-child(23) {
background-color: darkgoldenrod; }
.color-names li:nth-child(23):after {
content: 'darkgoldenrod';
display: block;
text-align: center; }
.color-names li:nth-child(24) {
background-color: darkgray; }
.color-names li:nth-child(24):after {
content: 'darkgray';
display: block;
text-align: center; }
.color-names li:nth-child(25) {
background-color: darkgreen; }
.color-names li:nth-child(25):after {
content: 'darkgreen';
display: block;
text-align: center; }
.color-names li:nth-child(26) {
background-color: darkkhaki; }
.color-names li:nth-child(26):after {
content: 'darkkhaki';
display: block;
text-align: center; }
.color-names li:nth-child(27) {
background-color: darkmagenta; }
.color-names li:nth-child(27):after {
content: 'darkmagenta';
display: block;
text-align: center; }
.color-names li:nth-child(28) {
background-color: darkolivegreen; }
.color-names li:nth-child(28):after {
content: 'darkolivegreen';
display: block;
text-align: center; }
.color-names li:nth-child(29) {
background-color: darkorange; }
.color-names li:nth-child(29):after {
content: 'darkorange';
display: block;
text-align: center; }
.color-names li:nth-child(30) {
background-color: darkorchid; }
.color-names li:nth-child(30):after {
content: 'darkorchid';
display: block;
text-align: center; }
.color-names li:nth-child(31) {
background-color: darkred; }
.color-names li:nth-child(31):after {
content: 'darkred';
display: block;
text-align: center; }
.color-names li:nth-child(32) {
background-color: darksalmon; }
.color-names li:nth-child(32):after {
content: 'darksalmon';
display: block;
text-align: center; }
.color-names li:nth-child(33) {
background-color: darkseagreen; }
.color-names li:nth-child(33):after {
content: 'darkseagreen';
display: block;
text-align: center; }
.color-names li:nth-child(34) {
background-color: darkslateblue; }
.color-names li:nth-child(34):after {
content: 'darkslateblue';
display: block;
text-align: center; }
.color-names li:nth-child(35) {
background-color: darkslategray; }
.color-names li:nth-child(35):after {
content: 'darkslategray';
display: block;
text-align: center; }
.color-names li:nth-child(36) {
background-color: darkturquoise; }
.color-names li:nth-child(36):after {
content: 'darkturquoise';
display: block;
text-align: center; }
.color-names li:nth-child(37) {
background-color: darkviolet; }
.color-names li:nth-child(37):after {
content: 'darkviolet';
display: block;
text-align: center; }
.color-names li:nth-child(38) {
background-color: deeppink; }
.color-names li:nth-child(38):after {
content: 'deeppink';
display: block;
text-align: center; }
.color-names li:nth-child(39) {
background-color: deepskyblue; }
.color-names li:nth-child(39):after {
content: 'deepskyblue';
display: block;
text-align: center; }
.color-names li:nth-child(40) {
background-color: dimgray; }
.color-names li:nth-child(40):after {
content: 'dimgray';
display: block;
text-align: center; }
.color-names li:nth-child(41) {
background-color: dodgerblue; }
.color-names li:nth-child(41):after {
content: 'dodgerblue';
display: block;
text-align: center; }
.color-names li:nth-child(42) {
background-color: firebrick; }
.color-names li:nth-child(42):after {
content: 'firebrick';
display: block;
text-align: center; }
.color-names li:nth-child(43) {
background-color: floralwhite; }
.color-names li:nth-child(43):after {
content: 'floralwhite';
display: block;
text-align: center; }
.color-names li:nth-child(44) {
background-color: forestgreen; }
.color-names li:nth-child(44):after {
content: 'forestgreen';
display: block;
text-align: center; }
.color-names li:nth-child(45) {
background-color: gainsboro; }
.color-names li:nth-child(45):after {
content: 'gainsboro';
display: block;
text-align: center; }
.color-names li:nth-child(46) {
background-color: ghostwhite; }
.color-names li:nth-child(46):after {
content: 'ghostwhite';
display: block;
text-align: center; }
.color-names li:nth-child(47) {
background-color: gold; }
.color-names li:nth-child(47):after {
content: 'gold';
display: block;
text-align: center; }
.color-names li:nth-child(48) {
background-color: goldenrod; }
.color-names li:nth-child(48):after {
content: 'goldenrod';
display: block;
text-align: center; }
.color-names li:nth-child(49) {
background-color: gray; }
.color-names li:nth-child(49):after {
content: 'gray';
display: block;
text-align: center; }
.color-names li:nth-child(50) {
background-color: green; }
.color-names li:nth-child(50):after {
content: 'green';
display: block;
text-align: center; }
.color-names li:nth-child(51) {
background-color: greenyellow; }
.color-names li:nth-child(51):after {
content: 'greenyellow';
display: block;
text-align: center; }
.color-names li:nth-child(52) {
background-color: honeydew; }
.color-names li:nth-child(52):after {
content: 'honeydew';
display: block;
text-align: center; }
.color-names li:nth-child(53) {
background-color: hotpink; }
.color-names li:nth-child(53):after {
content: 'hotpink';
display: block;
text-align: center; }
.color-names li:nth-child(54) {
background-color: indianred; }
.color-names li:nth-child(54):after {
content: 'indianred';
display: block;
text-align: center; }
.color-names li:nth-child(55) {
background-color: indigo; }
.color-names li:nth-child(55):after {
content: 'indigo';
display: block;
text-align: center; }
.color-names li:nth-child(56) {
background-color: ivory; }
.color-names li:nth-child(56):after {
content: 'ivory';
display: block;
text-align: center; }
.color-names li:nth-child(57) {
background-color: khaki; }
.color-names li:nth-child(57):after {
content: 'khaki';
display: block;
text-align: center; }
.color-names li:nth-child(58) {
background-color: lavender; }
.color-names li:nth-child(58):after {
content: 'lavender';
display: block;
text-align: center; }
.color-names li:nth-child(59) {
background-color: lavenderblush; }
.color-names li:nth-child(59):after {
content: 'lavenderblush';
display: block;
text-align: center; }
.color-names li:nth-child(60) {
background-color: lawngreen; }
.color-names li:nth-child(60):after {
content: 'lawngreen';
display: block;
text-align: center; }
.color-names li:nth-child(61) {
background-color: lemonchiffon; }
.color-names li:nth-child(61):after {
content: 'lemonchiffon';
display: block;
text-align: center; }
.color-names li:nth-child(62) {
background-color: lightblue; }
.color-names li:nth-child(62):after {
content: 'lightblue';
display: block;
text-align: center; }
.color-names li:nth-child(63) {
background-color: lightcoral; }
.color-names li:nth-child(63):after {
content: 'lightcoral';
display: block;
text-align: center; }
.color-names li:nth-child(64) {
background-color: lightcyan; }
.color-names li:nth-child(64):after {
content: 'lightcyan';
display: block;
text-align: center; }
.color-names li:nth-child(65) {
background-color: lightgoldenrodyellow; }
.color-names li:nth-child(65):after {
content: 'lightgoldenrodyellow';
display: block;
text-align: center; }
.color-names li:nth-child(66) {
background-color: lightgreen; }
.color-names li:nth-child(66):after {
content: 'lightgreen';
display: block;
text-align: center; }
.color-names li:nth-child(67) {
background-color: lightgray; }
.color-names li:nth-child(67):after {
content: 'lightgray';
display: block;
text-align: center; }
.color-names li:nth-child(68) {
background-color: lightpink; }
.color-names li:nth-child(68):after {
content: 'lightpink';
display: block;
text-align: center; }
.color-names li:nth-child(69) {
background-color: lightsalmon; }
.color-names li:nth-child(69):after {
content: 'lightsalmon';
display: block;
text-align: center; }
.color-names li:nth-child(70) {
background-color: lightseagreen; }
.color-names li:nth-child(70):after {
content: 'lightseagreen';
display: block;
text-align: center; }
.color-names li:nth-child(71) {
background-color: lightskyblue; }
.color-names li:nth-child(71):after {
content: 'lightskyblue';
display: block;
text-align: center; }
.color-names li:nth-child(72) {
background-color: lightslategray; }
.color-names li:nth-child(72):after {
content: 'lightslategray';
display: block;
text-align: center; }
.color-names li:nth-child(73) {
background-color: lightsteelblue; }
.color-names li:nth-child(73):after {
content: 'lightsteelblue';
display: block;
text-align: center; }
.color-names li:nth-child(74) {
background-color: lightyellow; }
.color-names li:nth-child(74):after {
content: 'lightyellow';
display: block;
text-align: center; }
.color-names li:nth-child(75) {
background-color: lime; }
.color-names li:nth-child(75):after {
content: 'lime';
display: block;
text-align: center; }
.color-names li:nth-child(76) {
background-color: limegreen; }
.color-names li:nth-child(76):after {
content: 'limegreen';
display: block;
text-align: center; }
.color-names li:nth-child(77) {
background-color: linen; }
.color-names li:nth-child(77):after {
content: 'linen';
display: block;
text-align: center; }
.color-names li:nth-child(78) {
background-color: magenta; }
.color-names li:nth-child(78):after {
content: 'magenta';
display: block;
text-align: center; }
.color-names li:nth-child(79) {
background-color: maroon; }
.color-names li:nth-child(79):after {
content: 'maroon';
display: block;
text-align: center; }
.color-names li:nth-child(80) {
background-color: mediumaquamarine; }
.color-names li:nth-child(80):after {
content: 'mediumaquamarine';
display: block;
text-align: center; }
.color-names li:nth-child(81) {
background-color: mediumblue; }
.color-names li:nth-child(81):after {
content: 'mediumblue';
display: block;
text-align: center; }
.color-names li:nth-child(82) {
background-color: mediumorchid; }
.color-names li:nth-child(82):after {
content: 'mediumorchid';
display: block;
text-align: center; }
.color-names li:nth-child(83) {
background-color: mediumpurple; }
.color-names li:nth-child(83):after {
content: 'mediumpurple';
display: block;
text-align: center; }
.color-names li:nth-child(84) {
background-color: mediumseagreen; }
.color-names li:nth-child(84):after {
content: 'mediumseagreen';
display: block;
text-align: center; }
.color-names li:nth-child(85) {
background-color: mediumslateblue; }
.color-names li:nth-child(85):after {
content: 'mediumslateblue';
display: block;
text-align: center; }
.color-names li:nth-child(86) {
background-color: mediumspringgreen; }
.color-names li:nth-child(86):after {
content: 'mediumspringgreen';
display: block;
text-align: center; }
.color-names li:nth-child(87) {
background-color: mediumturquoise; }
.color-names li:nth-child(87):after {
content: 'mediumturquoise';
display: block;
text-align: center; }
.color-names li:nth-child(88) {
background-color: mediumvioletred; }
.color-names li:nth-child(88):after {
content: 'mediumvioletred';
display: block;
text-align: center; }
.color-names li:nth-child(89) {
background-color: midnightblue; }
.color-names li:nth-child(89):after {
content: 'midnightblue';
display: block;
text-align: center; }
.color-names li:nth-child(90) {
background-color: mintcream; }
.color-names li:nth-child(90):after {
content: 'mintcream';
display: block;
text-align: center; }
.color-names li:nth-child(91) {
background-color: mistyrose; }
.color-names li:nth-child(91):after {
content: 'mistyrose';
display: block;
text-align: center; }
.color-names li:nth-child(92) {
background-color: moccasin; }
.color-names li:nth-child(92):after {
content: 'moccasin';
display: block;
text-align: center; }
.color-names li:nth-child(93) {
background-color: navajowhite; }
.color-names li:nth-child(93):after {
content: 'navajowhite';
display: block;
text-align: center; }
.color-names li:nth-child(94) {
background-color: navy; }
.color-names li:nth-child(94):after {
content: 'navy';
display: block;
text-align: center; }
.color-names li:nth-child(95) {
background-color: oldlace; }
.color-names li:nth-child(95):after {
content: 'oldlace';
display: block;
text-align: center; }
.color-names li:nth-child(96) {
background-color: olive; }
.color-names li:nth-child(96):after {
content: 'olive';
display: block;
text-align: center; }
.color-names li:nth-child(97) {
background-color: olivedrab; }
.color-names li:nth-child(97):after {
content: 'olivedrab';
display: block;
text-align: center; }
.color-names li:nth-child(98) {
background-color: orange; }
.color-names li:nth-child(98):after {
content: 'orange';
display: block;
text-align: center; }
.color-names li:nth-child(99) {
background-color: orangered; }
.color-names li:nth-child(99):after {
content: 'orangered';
display: block;
text-align: center; }
.color-names li:nth-child(100) {
background-color: orchid; }
.color-names li:nth-child(100):after {
content: 'orchid';
display: block;
text-align: center; }
.color-names li:nth-child(101) {
background-color: palegoldenrod; }
.color-names li:nth-child(101):after {
content: 'palegoldenrod';
display: block;
text-align: center; }
.color-names li:nth-child(102) {
background-color: palegreen; }
.color-names li:nth-child(102):after {
content: 'palegreen';
display: block;
text-align: center; }
.color-names li:nth-child(103) {
background-color: paleturquoise; }
.color-names li:nth-child(103):after {
content: 'paleturquoise';
display: block;
text-align: center; }
.color-names li:nth-child(104) {
background-color: palevioletred; }
.color-names li:nth-child(104):after {
content: 'palevioletred';
display: block;
text-align: center; }
.color-names li:nth-child(105) {
background-color: papayawhip; }
.color-names li:nth-child(105):after {
content: 'papayawhip';
display: block;
text-align: center; }
.color-names li:nth-child(106) {
background-color: peachpuff; }
.color-names li:nth-child(106):after {
content: 'peachpuff';
display: block;
text-align: center; }
.color-names li:nth-child(107) {
background-color: peru; }
.color-names li:nth-child(107):after {
content: 'peru';
display: block;
text-align: center; }
.color-names li:nth-child(108) {
background-color: pink; }
.color-names li:nth-child(108):after {
content: 'pink';
display: block;
text-align: center; }
.color-names li:nth-child(109) {
background-color: plum; }
.color-names li:nth-child(109):after {
content: 'plum';
display: block;
text-align: center; }
.color-names li:nth-child(110) {
background-color: powderblue; }
.color-names li:nth-child(110):after {
content: 'powderblue';
display: block;
text-align: center; }
.color-names li:nth-child(111) {
background-color: purple; }
.color-names li:nth-child(111):after {
content: 'purple';
display: block;
text-align: center; }
.color-names li:nth-child(112) {
background-color: red; }
.color-names li:nth-child(112):after {
content: 'red';
display: block;
text-align: center; }
.color-names li:nth-child(113) {
background-color: rebeccapurple; }
.color-names li:nth-child(113):after {
content: 'rebeccapurple';
display: block;
text-align: center; }
.color-names li:nth-child(114) {
background-color: rosybrown; }
.color-names li:nth-child(114):after {
content: 'rosybrown';
display: block;
text-align: center; }
.color-names li:nth-child(115) {
background-color: royalblue; }
.color-names li:nth-child(115):after {
content: 'royalblue';
display: block;
text-align: center; }
.color-names li:nth-child(116) {
background-color: saddlebrown; }
.color-names li:nth-child(116):after {
content: 'saddlebrown';
display: block;
text-align: center; }
.color-names li:nth-child(117) {
background-color: salmon; }
.color-names li:nth-child(117):after {
content: 'salmon';
display: block;
text-align: center; }
.color-names li:nth-child(118) {
background-color: sandybrown; }
.color-names li:nth-child(118):after {
content: 'sandybrown';
display: block;
text-align: center; }
.color-names li:nth-child(119) {
background-color: seagreen; }
.color-names li:nth-child(119):after {
content: 'seagreen';
display: block;
text-align: center; }
.color-names li:nth-child(120) {
background-color: seashell; }
.color-names li:nth-child(120):after {
content: 'seashell';
display: block;
text-align: center; }
.color-names li:nth-child(121) {
background-color: sienna; }
.color-names li:nth-child(121):after {
content: 'sienna';
display: block;
text-align: center; }
.color-names li:nth-child(122) {
background-color: silver; }
.color-names li:nth-child(122):after {
content: 'silver';
display: block;
text-align: center; }
.color-names li:nth-child(123) {
background-color: skyblue; }
.color-names li:nth-child(123):after {
content: 'skyblue';
display: block;
text-align: center; }
.color-names li:nth-child(124) {
background-color: slateblue; }
.color-names li:nth-child(124):after {
content: 'slateblue';
display: block;
text-align: center; }
.color-names li:nth-child(125) {
background-color: slategray; }
.color-names li:nth-child(125):after {
content: 'slategray';
display: block;
text-align: center; }
.color-names li:nth-child(126) {
background-color: snow; }
.color-names li:nth-child(126):after {
content: 'snow';
display: block;
text-align: center; }
.color-names li:nth-child(127) {
background-color: springgreen; }
.color-names li:nth-child(127):after {
content: 'springgreen';
display: block;
text-align: center; }
.color-names li:nth-child(128) {
background-color: steelblue; }
.color-names li:nth-child(128):after {
content: 'steelblue';
display: block;
text-align: center; }
.color-names li:nth-child(129) {
background-color: tan; }
.color-names li:nth-child(129):after {
content: 'tan';
display: block;
text-align: center; }
.color-names li:nth-child(130) {
background-color: teal; }
.color-names li:nth-child(130):after {
content: 'teal';
display: block;
text-align: center; }
.color-names li:nth-child(131) {
background-color: thistle; }
.color-names li:nth-child(131):after {
content: 'thistle';
display: block;
text-align: center; }
.color-names li:nth-child(132) {
background-color: tomato; }
.color-names li:nth-child(132):after {
content: 'tomato';
display: block;
text-align: center; }
.color-names li:nth-child(133) {
background-color: transparent; }
.color-names li:nth-child(133):after {
content: 'transparent';
display: block;
text-align: center; }
.color-names li:nth-child(134) {
background-color: turquoise; }
.color-names li:nth-child(134):after {
content: 'turquoise';
display: block;
text-align: center; }
.color-names li:nth-child(135) {
background-color: violet; }
.color-names li:nth-child(135):after {
content: 'violet';
display: block;
text-align: center; }
.color-names li:nth-child(136) {
background-color: wheat; }
.color-names li:nth-child(136):after {
content: 'wheat';
display: block;
text-align: center; }
.color-names li:nth-child(137) {
background-color: white; }
.color-names li:nth-child(137):after {
content: 'white';
display: block;
text-align: center; }
.color-names li:nth-child(138) {
background-color: whitesmoke; }
.color-names li:nth-child(138):after {
content: 'whitesmoke';
display: block;
text-align: center; }
.color-names li:nth-child(139) {
background-color: yellow; }
.color-names li:nth-child(139):after {
content: 'yellow';
display: block;
text-align: center; }
.color-names li:nth-child(140) {
background-color: yellowgreen; }
.color-names li:nth-child(140):after {
content: 'yellowgreen';
display: block;
text-align: center; }
Raw
SassMeister-rendered.html
<h2>ALTERNATE_COLOR_NAMES</h2>
<ul class="alternate-color-name">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h2>COLOR_NAMES</h2>
<ul class="color-names">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment