erikjung
7/17/2012 - 8:45 PM

Using SASS Color Functions

Using SASS Color Functions

$colors:  #ebcf91, #ebb500, #89af9e, #0f0903;

@function textColor() {
  @return nth($colors, 1);
}

@function primaryColor() {
  @return nth($colors, 2);
}

@function secondaryColor() {
  @return nth($colors, 3);
}

@function alternateColor() {
  @return complement(secondaryColor());
}

@function backgroundColor() {
  @return nth($colors, length($colors));
}

@function linkColors($base: primaryColor()) {
  $link: $base;
  $hover: lighten($link, 25%);
  $visited: desaturate($link, 25%);
  @return $link, $hover, $visited;
}

body {
  background: backgroundColor();
  color: textColor();
  font: 50px sans-serif;
}

h1 {
  color: secondaryColor();
}

h3 {
  color: alternateColor();
}

a {
  $colors: linkColors();
  
  color: nth($colors, 1);
  
  &:hover {
    color: nth($colors, 2);
  }
  
  &:visited {
    color: nth($colors, 3);
  }
}