Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Color Swatches</h1>

<ul class="sg__colours">
  <li class="sg__colour sg__colour--brand"></li>
  <li class="sg__colour sg__colour--copy"></li>
  <li class="sg__colour sg__colour--link"></li>
  <li class="sg__colour sg__colour--hover"></li>
  <li class="sg__colour sg__colour--highlight"></li>
  <li class="sg__colour sg__colour--error"></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

$colours: (
  'brand'     : #003249,
  'copy'      : #00425c,
  'link'      : #007ba6,
  'hover'     : #addfea,
  'highlight' : #ceb38f,
  'error'     : #a0100f
);

.sg__colour {
	width:100px;
	height:100px;
	color:#fff;
	float:left;
	text-align:center;
}
@each $name, $color in $colours {

	.sg__colour--#{$name} {
		background:$color;
		
		&:before {
			content: "#{$name}";
	    color:#fff;
	    line-height:100px;
		}
		
		&:after {
			content: "#{$color}";
			color:$color;
			position: relative;
			display:block;
			line-height:25px
		}
	}
}

.sg__colours {
  display:inline-block;
  list-style:none;
  margin:0;
  padding:0;
}

// get the value of the copy color from the sass map 
// and assign it to a variable
$colour-copy: map-get($colours, copy);

h1 {
  color: $colour-copy;
}

SassMeister-output.css

.sg__colour {
  width: 100px;
  height: 100px;
  color: #fff;
  float: left;
  text-align: center;
}

.sg__colour--brand {
  background: #003249;
}
.sg__colour--brand:before {
  content: "brand";
  color: #fff;
  line-height: 100px;
}
.sg__colour--brand:after {
  content: "#003249";
  color: #003249;
  position: relative;
  display: block;
  line-height: 25px;
}

.sg__colour--copy {
  background: #00425c;
}
.sg__colour--copy:before {
  content: "copy";
  color: #fff;
  line-height: 100px;
}
.sg__colour--copy:after {
  content: "#00425c";
  color: #00425c;
  position: relative;
  display: block;
  line-height: 25px;
}

.sg__colour--link {
  background: #007ba6;
}
.sg__colour--link:before {
  content: "link";
  color: #fff;
  line-height: 100px;
}
.sg__colour--link:after {
  content: "#007ba6";
  color: #007ba6;
  position: relative;
  display: block;
  line-height: 25px;
}

.sg__colour--hover {
  background: #addfea;
}
.sg__colour--hover:before {
  content: "hover";
  color: #fff;
  line-height: 100px;
}
.sg__colour--hover:after {
  content: "#addfea";
  color: #addfea;
  position: relative;
  display: block;
  line-height: 25px;
}

.sg__colour--highlight {
  background: #ceb38f;
}
.sg__colour--highlight:before {
  content: "highlight";
  color: #fff;
  line-height: 100px;
}
.sg__colour--highlight:after {
  content: "#ceb38f";
  color: #ceb38f;
  position: relative;
  display: block;
  line-height: 25px;
}

.sg__colour--error {
  background: #a0100f;
}
.sg__colour--error:before {
  content: "error";
  color: #fff;
  line-height: 100px;
}
.sg__colour--error:after {
  content: "#a0100f";
  color: #a0100f;
  position: relative;
  display: block;
  line-height: 25px;
}

.sg__colours {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

h1 {
  color: #00425c;
}

SassMeister-rendered.html

<h1>Color Swatches</h1>

<ul class="sg__colours">
  <li class="sg__colour sg__colour--brand"></li>
  <li class="sg__colour sg__colour--copy"></li>
  <li class="sg__colour sg__colour--link"></li>
  <li class="sg__colour sg__colour--hover"></li>
  <li class="sg__colour sg__colour--highlight"></li>
  <li class="sg__colour sg__colour--error"></li>
</ul>