Generated by SassMeister.com.

SassMeister-input-HTML.html

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// Color Schemer (v0.2.8)
// ----

@mixin colors($colors) {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  @for $i from 1 through length($colors) {
    div:nth-child(#{$i}) {
      width: 100% / length($colors);
      height: 100%;
      background: nth($colors, $i);
      float: left;
    }
  }
}

@import 'color-schemer';

$cs-primary: purple;
$cs-scheme: tetrad; // mono, complement, triad, tetrad, analogic, accented-analogic
// $cs-hue-offset: 30deg;
// $cs-color-model: rgb; // rgb, ryb

@include colors(
  cs-primary()
  cs-secondary()
  cs-tertiary()
  cs-quadrary()
  // cmyk(60,100,10,6)
);

SassMeister-output.css

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div:nth-child(1) {
  width: 25%;
  height: 100%;
  background: purple;
  float: left;
}

div:nth-child(2) {
  width: 25%;
  height: 100%;
  background: #800040;
  float: left;
}

div:nth-child(3) {
  width: 25%;
  height: 100%;
  background: green;
  float: left;
}

div:nth-child(4) {
  width: 25%;
  height: 100%;
  background: #008040;
  float: left;
}

SassMeister-rendered.html

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>