Flexible Backgrounds with Sass and Compass

_base.scss

/**
 * Our theme base.
 *
 * We shouldn't have to modify this to create a new theme.
 */

@import 'compass/css3/images';

$page-fill: #f1f1f1 !default;

html {
  width: 100%;
  height: 100%;
}

/**
 * THE IMPORTANT PART 
 */

body {
  @if type-of($page-fill) == "list" {
    @include background(linear-gradient($page-fill));
  } @else if type-of($page-fill) == "color" {
    background-color: $page-fill;
  }
}

theme.scss

/**
 * A sample theme.
 *
 * The goal here is to be able to create a theme with either a solid background
 * or a gradient with N breakpoints, and control that from a single variable.
 */

// Possibilities include:

$page-fill: #f1f1f1;
$page-fill: (#333, #eee);
$page-fill: (#333, #eee, #333);
$page-fill: (#ccc 10%, #eee 50%, #aaa 85%);

@import 'base';