Generated by SassMeister.com.

SassMeister-input-HTML.html

<article class="calendar">
  <header class="calendar">
    <ul class="weekdays">
      <li class="weekday mon"><span class="weekday">Mon</span></li>
      <li class="weekday tue"><span class="weekday">Tue</span></li>
      <li class="weekday wed"><span class="weekday">Wed</span></li>
      <li class="weekday thu"><span class="weekday">Thu</span></li>
      <li class="weekday fri"><span class="weekday">Fri</span></li>
      <li class="weekday sat"><span class="weekday">Sat</span></li>
      <li class="weekday sun"><span class="weekday">Sun</span></li>
    </ul>
</header>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Singularity.gs (v1.2.0.rc.1)
// ----

@import "singularitygs";

@include add-grid(8);
@include add-gutter(1/3);

body {
  @include background-grid;
  padding: 0;
  margin: 0;
}

ul.weekdays {
  margin: 0;
  padding: 0;
  @include grid-span(7, 1);
  background: rgba(blue, .25);
}

li.weekday {
  display: inline;
  margin: 0;
  padding: 0;
  @include layout(7) {
    &.mon {
    @include grid-span(1, 1);
  }
  &.tue {
    @include grid-span(1, 2);
  }
  &.wed {
    @include grid-span(1, 3);
  }
  &.thu {
    @include grid-span(1, 4);
  }
  &.fri {
    @include grid-span(1, 5);
  }
  &.sat {
    @include grid-span(1, 6);
  }
  &.sun {
    @include grid-span(1, 7);
  }
  }
  
}

SassMeister-output.css

body {
  background-image: linear-gradient(to right, chocolate 0%, chocolate 9.67742%, #dd8e56 9.67742%, #dd8e56 12.90323%, chocolate 12.90323%, chocolate 22.58065%, #dd8e56 22.58065%, #dd8e56 25.80645%, chocolate 25.80645%, chocolate 35.48387%, #dd8e56 35.48387%, #dd8e56 38.70968%, chocolate 38.70968%, chocolate 48.3871%, #dd8e56 48.3871%, #dd8e56 51.6129%, chocolate 51.6129%, chocolate 61.29032%, #dd8e56 61.29032%, #dd8e56 64.51613%, chocolate 64.51613%, chocolate 74.19355%, #dd8e56 74.19355%, #dd8e56 77.41935%, chocolate 77.41935%, chocolate 87.09677%, #dd8e56 87.09677%, #dd8e56 90.32258%, chocolate 90.32258%, chocolate);
  padding: 0;
  margin: 0;
}

ul.weekdays {
  margin: 0;
  padding: 0;
  width: 87.09677%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
  background: rgba(0, 0, 255, 0.25);
}

li.weekday {
  display: inline;
  margin: 0;
  padding: 0;
}
li.weekday.mon {
  width: 11.11111%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}
li.weekday.tue {
  width: 11.11111%;
  float: left;
  margin-right: -100%;
  margin-left: 14.81481%;
  clear: none;
}
li.weekday.wed {
  width: 11.11111%;
  float: left;
  margin-right: -100%;
  margin-left: 29.62963%;
  clear: none;
}
li.weekday.thu {
  width: 11.11111%;
  float: left;
  margin-right: -100%;
  margin-left: 44.44444%;
  clear: none;
}
li.weekday.fri {
  width: 11.11111%;
  float: left;
  margin-right: -100%;
  margin-left: 59.25926%;
  clear: none;
}
li.weekday.sat {
  width: 11.11111%;
  float: left;
  margin-right: -100%;
  margin-left: 74.07407%;
  clear: none;
}
li.weekday.sun {
  width: 11.11111%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

SassMeister-rendered.html

<article class="calendar">
  <header class="calendar">
    <ul class="weekdays">
      <li class="weekday mon"><span class="weekday">Mon</span></li>
      <li class="weekday tue"><span class="weekday">Tue</span></li>
      <li class="weekday wed"><span class="weekday">Wed</span></li>
      <li class="weekday thu"><span class="weekday">Thu</span></li>
      <li class="weekday fri"><span class="weekday">Fri</span></li>
      <li class="weekday sat"><span class="weekday">Sat</span></li>
      <li class="weekday sun"><span class="weekday">Sun</span></li>
    </ul>
</header>