Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<ul class="sg-color-list">
  <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>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

SassMeister-input.scss

// ----
// libsass (v3.5.0.beta.2)
// ----

// Colors
$grey1:  #edeeed;
$grey2:  #E2E3E5;
$grey3:  #C9C9C9;
$grey4: #2A2E2F;
$grey5:  #3F3F3B;
$grey6:  #393940;
$grey7: #555555;
$grey8:  #585959;
$grey9:  #6e6e74;
$grey10:  #7d7d82;
$grey11:  #99999d;
$orange1: #fbab1b;
$orange2: #f63;
$brown1:  #a50;
$red1:    #a20000;
$red2:    #90011f;
$blue1:   #069;
$blue2:   #09c;
$blue3:   #71A3AD;
$blue4:   #588189;
$blue5:   #211864;
$green1:  #663; 
$green2:  #996;
$green3:  #cc0;
$green4:  #cc9;
// Colorlist
$colorlist-width:  160px;
$colorlist-height: 100px;

$colorlist-mb: 60px; // margin-bottom
$colorlist-mr: 20px; // margin-right

$colors-list: $grey1 $grey2 $grey3 $grey4 $grey5 $grey6 $grey7 $grey8 $grey9 $grey10 $grey11 $orange1 $orange2 $brown1 $red1 $red2 $blue1 $blue2 $blue3  $blue4 $blue5 $green1 $green2 $green3 $green4;
@each $current-color in $colors-list {
  $i: index($colors-list, $current-color);
  .sg-color-list li:nth-child(#{$i}) {
      background-color: $current-color;

			// &:before {
			// 	content: ""+ #{$current-color};
			// }

			&:after {
				content: ""+ $current-color;
			}
  }
} 

.sg-color-list {
  overflow: hidden;
  &, li {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
  }
  li {
    position: relative;
    float: left;
    width: $colorlist-width;
    height: $colorlist-height;
    margin-right:  $colorlist-mr;
    margin-bottom: $colorlist-mb;

		&:after { //, &:before 
			display: block;
			position: absolute;
			left: 0;
		}

		// &:before {
		// 	bottom: -10px;
		// }

		&:after {
			bottom: -20px;
		}
  }
}

body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

SassMeister-output.css

.sg-color-list li:nth-child(1) {
  background-color: #edeeed;
}

.sg-color-list li:nth-child(1):after {
  content: "#edeeed";
}

.sg-color-list li:nth-child(2) {
  background-color: #E2E3E5;
}

.sg-color-list li:nth-child(2):after {
  content: "#E2E3E5";
}

.sg-color-list li:nth-child(3) {
  background-color: #C9C9C9;
}

.sg-color-list li:nth-child(3):after {
  content: "#C9C9C9";
}

.sg-color-list li:nth-child(4) {
  background-color: #2A2E2F;
}

.sg-color-list li:nth-child(4):after {
  content: "#2A2E2F";
}

.sg-color-list li:nth-child(5) {
  background-color: #3F3F3B;
}

.sg-color-list li:nth-child(5):after {
  content: "#3F3F3B";
}

.sg-color-list li:nth-child(6) {
  background-color: #393940;
}

.sg-color-list li:nth-child(6):after {
  content: "#393940";
}

.sg-color-list li:nth-child(7) {
  background-color: #555555;
}

.sg-color-list li:nth-child(7):after {
  content: "#555555";
}

.sg-color-list li:nth-child(8) {
  background-color: #585959;
}

.sg-color-list li:nth-child(8):after {
  content: "#585959";
}

.sg-color-list li:nth-child(9) {
  background-color: #6e6e74;
}

.sg-color-list li:nth-child(9):after {
  content: "#6e6e74";
}

.sg-color-list li:nth-child(10) {
  background-color: #7d7d82;
}

.sg-color-list li:nth-child(10):after {
  content: "#7d7d82";
}

.sg-color-list li:nth-child(11) {
  background-color: #99999d;
}

.sg-color-list li:nth-child(11):after {
  content: "#99999d";
}

.sg-color-list li:nth-child(12) {
  background-color: #fbab1b;
}

.sg-color-list li:nth-child(12):after {
  content: "#fbab1b";
}

.sg-color-list li:nth-child(13) {
  background-color: #f63;
}

.sg-color-list li:nth-child(13):after {
  content: "#f63";
}

.sg-color-list li:nth-child(14) {
  background-color: #a50;
}

.sg-color-list li:nth-child(14):after {
  content: "#a50";
}

.sg-color-list li:nth-child(15) {
  background-color: #a20000;
}

.sg-color-list li:nth-child(15):after {
  content: "#a20000";
}

.sg-color-list li:nth-child(16) {
  background-color: #90011f;
}

.sg-color-list li:nth-child(16):after {
  content: "#90011f";
}

.sg-color-list li:nth-child(17) {
  background-color: #069;
}

.sg-color-list li:nth-child(17):after {
  content: "#069";
}

.sg-color-list li:nth-child(18) {
  background-color: #09c;
}

.sg-color-list li:nth-child(18):after {
  content: "#09c";
}

.sg-color-list li:nth-child(19) {
  background-color: #71A3AD;
}

.sg-color-list li:nth-child(19):after {
  content: "#71A3AD";
}

.sg-color-list li:nth-child(20) {
  background-color: #588189;
}

.sg-color-list li:nth-child(20):after {
  content: "#588189";
}

.sg-color-list li:nth-child(21) {
  background-color: #211864;
}

.sg-color-list li:nth-child(21):after {
  content: "#211864";
}

.sg-color-list li:nth-child(22) {
  background-color: #663;
}

.sg-color-list li:nth-child(22):after {
  content: "#663";
}

.sg-color-list li:nth-child(23) {
  background-color: #996;
}

.sg-color-list li:nth-child(23):after {
  content: "#996";
}

.sg-color-list li:nth-child(24) {
  background-color: #cc0;
}

.sg-color-list li:nth-child(24):after {
  content: "#cc0";
}

.sg-color-list li:nth-child(25) {
  background-color: #cc9;
}

.sg-color-list li:nth-child(25):after {
  content: "#cc9";
}

.sg-color-list {
  overflow: hidden;
}

.sg-color-list, .sg-color-list li {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.sg-color-list li {
  position: relative;
  float: left;
  width: 160px;
  height: 100px;
  margin-right: 20px;
  margin-bottom: 60px;
}

.sg-color-list li:after {
  display: block;
  position: absolute;
  left: 0;
}

.sg-color-list li:after {
  bottom: -20px;
}

body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

SassMeister-rendered.html

<ul class="sg-color-list">
  <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>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>