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";

$singularity: (
  grids: 7,
  gutters: 1/3
);

body {
  @include background-grid;
}

ul.weekdays {
  @include grid-span(7, 1);
}

li.weekday {
  display: inline;
  &.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 11.11111%, #dd8e56 11.11111%, #dd8e56 14.81481%, chocolate 14.81481%, chocolate 25.92593%, #dd8e56 25.92593%, #dd8e56 29.62963%, chocolate 29.62963%, chocolate 40.74074%, #dd8e56 40.74074%, #dd8e56 44.44444%, chocolate 44.44444%, chocolate 55.55556%, #dd8e56 55.55556%, #dd8e56 59.25926%, chocolate 59.25926%, chocolate 70.37037%, #dd8e56 70.37037%, #dd8e56 74.07407%, chocolate 74.07407%, chocolate 85.18519%, #dd8e56 85.18519%, #dd8e56 88.88889%, chocolate 88.88889%, chocolate);
}

ul.weekdays {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

li.weekday {
  display: inline;
}
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>