Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="test">
  Test Div!
  <a href="#">link</a>  
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

@import "compass";

$colors: (
  primary: hsl(212, 72%, 59%),
  background: #eee,
  text: #444,
  border: text (tint: 50%),
  action: primary,
  focus: action (adjust-hue: 180deg),
);

@function color(
  $color
) {
  $get: map-get($colors, $color) or $color;
  $base: nth($get, 1);
  $adjust: if(length($get) > 1, nth($get, 2), ());
  $color: if(type-of($base) == color, $base, color($base));

  @each $function, $values in $adjust {
    $color: call($function, $color, $values...)
  }
	
  @return $color;
}

// colors!
html {
  background: color(primary);
}

.test {
  background: color(background);
  border: 1px solid color(border);
  color: color(text);
  
  &:hover {
    background: color(background (rgba: .5));
  }
}

a {
  &:link, &:visited {
    color: color(action);
  }
  &:hover, &:focus, &:active {
    color: color(focus);
  }
}

// some structure
.test {
  font-size: larger;
  margin: 1em auto;
  padding: 3em;
  text-align: center;
  width: 30em;
}

SassMeister-output.css

html {
  background: #4b91e2;
}

.test {
  background: #eeeeee;
  border: 1px solid #a1a1a1;
  color: #444444;
}
.test:hover {
  background: rgba(238, 238, 238, 0.5);
}

a:link, a:visited {
  color: #4b91e2;
}
a:hover, a:focus, a:active {
  color: #e29b4b;
}

.test {
  font-size: larger;
  margin: 1em auto;
  padding: 3em;
  text-align: center;
  width: 30em;
}

SassMeister-rendered.html

<div class="test">
  Test Div!
  <a href="#">link</a>  
</div>