An example of a flexible color partial. Holds variables for common colors, and provides a mixin for building gradients

_colors.scss

/**
 * Colors
 *
 * @section colors
 *
 * Do NOT manually define hex values for colors. Stick to the
 * palette by using one of the variables below, or ADD a variable
 * if it is absolutely necessary
 */
 
 
// A list of the colors in here. Useful for using in loops and 
// passing into the mixins below
$colors: "white", "black", "grey", "blue", "orange", "red", "purple", "green", "yellow";
 
 
// Color hex values
$white: #fff;
$black: #4d4d4d;
$grey: #ccc;
$lightgrey: #eee;
$darkgrey: #666;
$blue: #057acf;
$orange: #ee8911;
$red: #e93e35;
$purple: #5d3bab;
$green: #79c11c;
$yellow: #f9b01b;

// Outputs a background gradient
@mixin -sg-gradient($color: grey) {
	
	$stops: null;
	
	@if $color == "white" {
		background-color: $white;
		$stops: #fff, #eee;
	} @else if $color == "grey" { 
		background-color: $lightgrey;
		$stops: #ececec, #dbdbdb;
	} @else if $color == "black" {
		background-color: $black;
		$stops: #666, #222;
	} @else if $color == "blue" {
		background-color: $blue;
		$stops: #0293e5, #0172b4;
	} @else if $color == "orange" {
		background-color: $orange;
		$stops: #ee8911, #ee5211;
	} @else if $color == "red" {
		background-color: $red;
		$stops: #f02828, #a61d1d;
	} @else if $color == "purple" {
		background-color: $purple;
		$stops: #5d3bab, #46259a;
	} @else if $color == "green" {
		background-color: $green;
		$stops: #79c11c, #6fb719, #65ad16, #519710;
	} @else if $color == "yellow" {
		background-color: $yellow;
		$stops: #f9b01b, #f28c14;
	}
	
	$count: length($stops);
	
	@if $count >= 1 {
		@if $count == 2 {
			@include background-image(linear-gradient(top center, nth($stops, 1), nth($stops, 2)));
		} @else if $count == 4 {
			@include background-image(linear-gradient(top center, nth($stops, 1) 0%, nth($stops, 2) 51%, nth($stops, 3) 52%, nth($stops, 4) 100%));
		}
	}
	
}