Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="spaceinvader">
  <div class="pixel pixel1">&nbsp;</div>
  <div class="pixel pixel2">&nbsp;</div>
  <div class="pixel pixel3">&nbsp;</div>
  <div class="pixel pixel4">&nbsp;</div>
  <div class="pixel pixel5-11">&nbsp;</div>
  <div class="pixel pixel12-13">&nbsp;</div>
  <div class="pixel pixel14-16">&nbsp;</div>
  <div class="pixel pixel17-18">&nbsp;</div>
  <div class="pixel pixel19-29">&nbsp;</div>
  <div class="pixel pixel30-31">&nbsp;</div>
  <div class="pixel pixel32-33">&nbsp;</div>
  <div class="pixel pixel34-35">&nbsp;</div>
  <div class="pixel pixel36-37">&nbsp;</div>
  <div class="pixel pixel38-42">&nbsp;</div>
  <div class="pixel pixel43">&nbsp;</div>
  <div class="pixel pixel44">&nbsp;</div>
  <div class="pixel pixel45-46">&nbsp;</div>
  <div class="pixel pixel47-48">&nbsp;</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

html, body {
  height: 100%;
}

.spaceinvader {
  height: 100%;
  display: -webkit-grid;
  -webkit-grid: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  /* -webkit-grid: 12px 12px 12px 12px / 12px 12px 12px 12px; */
}

.pixel1 {
  -webkit-grid-area: 1/3;
}

.pixel2 {
  -webkit-grid-area: 1/9;
}

.pixel3 {
  -webkit-grid-area: 2/4;
}

.pixel4 {
  -webkit-grid-area: 2/8;
}

.pixel5-11{
  -webkit-grid-row: 3;
  -webkit-grid-column: 3 / span 7;
}

.pixel12-13{
  -webkit-grid-row: 4;
  -webkit-grid-column: 2 / span 2;
}

.pixel14-16{
  -webkit-grid-row: 4;
  -webkit-grid-column: 5 / span 3;
}

.pixel17-18{
  -webkit-grid-row: 4;
  -webkit-grid-column: 9 / span 2;
}

.pixel19-29{
  -webkit-grid-row: 5;
  -webkit-grid-column: 1 / span 11;
}

.pixel30-31{
  -webkit-grid-row: 6 / span 2;
  -webkit-grid-column: 1;
}

.pixel32-33{
  -webkit-grid-row: 6 / span 2;
  -webkit-grid-column: 3;
}

.pixel34-35{
  -webkit-grid-row: 6 / span 2;
  -webkit-grid-column: 9;
}

.pixel36-37{
  -webkit-grid-row: 6 / span 2;
  -webkit-grid-column: 11;
}

.pixel38-42{
  -webkit-grid-row: 6;
  -webkit-grid-column: 4 / span 5;
}

.pixel43{
  -webkit-grid-area: 7/3;
}

.pixel44{
  -webkit-grid-area: 7/9;
}

.pixel45-46{
  -webkit-grid-row: 8;
  -webkit-grid-column: 4 / span 2;
}

.pixel47-48{
  -webkit-grid-row: 8;
  -webkit-grid-column: 7 / span 2;
}

.pixel {
  height: 100%;
  background-color: red;
}

SassMeister-output.css

html, body {
  height: 100%;
}

.spaceinvader {
  height: 100%;
  display: -webkit-grid;
  -webkit-grid: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr/1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  /* -webkit-grid: 12px 12px 12px 12px / 12px 12px 12px 12px; */
}

.pixel1 {
  -webkit-grid-area: 1/3;
}

.pixel2 {
  -webkit-grid-area: 1/9;
}

.pixel3 {
  -webkit-grid-area: 2/4;
}

.pixel4 {
  -webkit-grid-area: 2/8;
}

.pixel5-11 {
  -webkit-grid-row: 3;
  -webkit-grid-column: 3 / span 7;
}

.pixel12-13 {
  -webkit-grid-row: 4;
  -webkit-grid-column: 2 / span 2;
}

.pixel14-16 {
  -webkit-grid-row: 4;
  -webkit-grid-column: 5 / span 3;
}

.pixel17-18 {
  -webkit-grid-row: 4;
  -webkit-grid-column: 9 / span 2;
}

.pixel19-29 {
  -webkit-grid-row: 5;
  -webkit-grid-column: 1 / span 11;
}

.pixel30-31 {
  -webkit-grid-row: 6 / span 2;
  -webkit-grid-column: 1;
}

.pixel32-33 {
  -webkit-grid-row: 6 / span 2;
  -webkit-grid-column: 3;
}

.pixel34-35 {
  -webkit-grid-row: 6 / span 2;
  -webkit-grid-column: 9;
}

.pixel36-37 {
  -webkit-grid-row: 6 / span 2;
  -webkit-grid-column: 11;
}

.pixel38-42 {
  -webkit-grid-row: 6;
  -webkit-grid-column: 4 / span 5;
}

.pixel43 {
  -webkit-grid-area: 7/3;
}

.pixel44 {
  -webkit-grid-area: 7/9;
}

.pixel45-46 {
  -webkit-grid-row: 8;
  -webkit-grid-column: 4 / span 2;
}

.pixel47-48 {
  -webkit-grid-row: 8;
  -webkit-grid-column: 7 / span 2;
}

.pixel {
  height: 100%;
  background-color: red;
}

SassMeister-rendered.html

<div class="spaceinvader">
  <div class="pixel pixel1">&nbsp;</div>
  <div class="pixel pixel2">&nbsp;</div>
  <div class="pixel pixel3">&nbsp;</div>
  <div class="pixel pixel4">&nbsp;</div>
  <div class="pixel pixel5-11">&nbsp;</div>
  <div class="pixel pixel12-13">&nbsp;</div>
  <div class="pixel pixel14-16">&nbsp;</div>
  <div class="pixel pixel17-18">&nbsp;</div>
  <div class="pixel pixel19-29">&nbsp;</div>
  <div class="pixel pixel30-31">&nbsp;</div>
  <div class="pixel pixel32-33">&nbsp;</div>
  <div class="pixel pixel34-35">&nbsp;</div>
  <div class="pixel pixel36-37">&nbsp;</div>
  <div class="pixel pixel38-42">&nbsp;</div>
  <div class="pixel pixel43">&nbsp;</div>
  <div class="pixel pixel44">&nbsp;</div>
  <div class="pixel pixel45-46">&nbsp;</div>
  <div class="pixel pixel47-48">&nbsp;</div>
</div>