Generated by SassMeister.com.

SassMeister-input-HTML.html

    <section>
      <h1>File Mix</h1>
      <p>See the types of files currently on your site.</p>
      <figure>
        <span class="type-1" style="width:1.2%" title="png">1.2%</span>
        <span class="type-2" style="width:4.0%" title="css">4.0%</span>
        <span class="type-3" style="width:3.0%" title="gif">3.0%</span>
        <span class="type-4" style="width:19.5%" title="other">19.5%</span>
        <span class="type-5" style="width:7.8%" title="pdf">7.8%</span>
        <span class="type-6" style="width:27.5%" title="php">27.5%</span>
        <span class="type-7" style="width:7.0%" title="sass">7.0%</span>
        <span class="type-8" style="width:9.0%" title="scss">9.0%</span>
        <span class="type-9" style="width:9.0%" title="tiff">9.0%</span>
        <span class="type-10" style="width:2.0%" title="js">2.0%</span>
        <span class="type-11" style="width:10.0%" title="html">10.0%</span>
      </figure>
      <dl class="type-1">
        <dt>png</dt>
        <dd>12</dd>
      </dl>
      <dl class="type-2">
        <dt>css</dt>
        <dd>40</dd>
      </dl>
      <dl class="type-3">
        <dt>gif</dt>
        <dd>30</dd>
      </dl>
      <dl class="type-4">
        <dt>other</dt>
        <dd>195</dd>
      </dl>
      <dl class="type-5">
        <dt>pdf</dt>
        <dd>78</dd>
      </dl>
      <dl class="type-6">
        <dt>php</dt>
        <dd>275</dd>
      </dl>
      <dl class="type-7">
        <dt>sass</dt>
        <dd>70</dd>
      </dl>
      <dl class="type-8">
        <dt>scss</dt>
        <dd>90</dd>
      </dl>
      <dl class="type-9">
        <dt>tiff</dt>
        <dd>90</dd>
      </dl>
      <dl class="type-10">
        <dt>js</dt>
        <dd>20</dd>
      </dl>
      <dl class="type-11">
        <dt>html</dt>
        <dd>100</dd>
      </dl>
    </section>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";

figure {
  @include clearfix;
  width: 100%;
  line-height: 1.5em;
  border: 1px solid #bababa;
  @include border-radius(3px);
  margin: 0.5em 0 1.5em;
  span {
    display: block;
    float: left;
    width: 10%;
    @include box-shadow(-1px 0 0 white inset);
    text-indent: -99em;
    background: #cccccc;
    &.type-1 {
      background: #f97f4e;
    }
    &.type-2 {
      background: #5aa0d7;
    }
    &.type-3 {
      background: #d883b8;
    }
    &.type-4 {
      background: #96d6f1;
    }
    &.type-5 {
      background: #08c7a9;
    }
    &.type-6 {
      background: #fac350;
    }
    &.type-7 {
      background: #46d7cc;
    }
    &.type-8 {
      background: #909093;
    }
    &.type-9 {
      background: #fc8e23;
    }
    &.type-10 {
      background: #957f56;
    }
    &.type-11 {
      background: #9cddb4;
    }
  }
}

dl {
  @include clearfix;
  float: left;
  width: auto;
  min-width: 16%;
  margin: 0 0 0.25em;
 
  &:before {
    content: "";
    display: block;
    float: left;
    margin: 3px 3px 0 0;
    text-align: center;
    height: 10px;
    width: 10px;
    position: relative;
    top: 1px;
    border: 1px solid #cccccc;
    @include border-radius(12px);
    background: #cccccc;
  }
  &.type-1:before {
    background: #f97f4e;
  }
  &.type-2:before {
    background: #5aa0d7;
  }
  &.type-3:before {
    background: #d883b8;
  }
  &.type-4:before {
    background: #96d6f1;
  }
  &.type-5:before {
    background: #08c7a9;
  }
  &.type-6:before {
    background: #fac350;
  }
  &.type-7:before {
    background: #46d7cc;
  }
  &.type-8:before {
    background: #909093;
  }
  &.type-9:before {
    background: #fc8e23;
  }
  &.type-10:before {
    background: #957f56;
  }
  &.type-11:before {
    background: #9cddb4;
  }
  &:nth-of-type(6n+7) {
    clear: left;
    margin-left: 0;
  }
}

dt, dd {
    float: left;
    width: auto;
    font-size: 0.875rem;
    font-family: sans-serif;
    margin: 0 0.5em 0 0;
    line-height: 1.5;
  }
dt {
    text-transform: uppercase;
    font-weight: 600;
}
dd {
    font-style: italic;
    color: #383138;
}
dd + dt {
    margin-left: 1em;
}

SassMeister-output.css

figure {
  overflow: hidden;
  *zoom: 1;
  width: 100%;
  line-height: 1.5em;
  border: 1px solid #bababa;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0.5em 0 1.5em;
}
figure span {
  display: block;
  float: left;
  width: 10%;
  -moz-box-shadow: -1px 0 0 white inset;
  -webkit-box-shadow: -1px 0 0 white inset;
  box-shadow: -1px 0 0 white inset;
  text-indent: -99em;
  background: #cccccc;
}
figure span.type-1 {
  background: #f97f4e;
}
figure span.type-2 {
  background: #5aa0d7;
}
figure span.type-3 {
  background: #d883b8;
}
figure span.type-4 {
  background: #96d6f1;
}
figure span.type-5 {
  background: #08c7a9;
}
figure span.type-6 {
  background: #fac350;
}
figure span.type-7 {
  background: #46d7cc;
}
figure span.type-8 {
  background: #909093;
}
figure span.type-9 {
  background: #fc8e23;
}
figure span.type-10 {
  background: #957f56;
}
figure span.type-11 {
  background: #9cddb4;
}

dl {
  overflow: hidden;
  *zoom: 1;
  float: left;
  width: auto;
  min-width: 16%;
  margin: 0 0 0.25em;
}
dl:before {
  content: "";
  display: block;
  float: left;
  margin: 3px 3px 0 0;
  text-align: center;
  height: 10px;
  width: 10px;
  position: relative;
  top: 1px;
  border: 1px solid #cccccc;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  background: #cccccc;
}
dl.type-1:before {
  background: #f97f4e;
}
dl.type-2:before {
  background: #5aa0d7;
}
dl.type-3:before {
  background: #d883b8;
}
dl.type-4:before {
  background: #96d6f1;
}
dl.type-5:before {
  background: #08c7a9;
}
dl.type-6:before {
  background: #fac350;
}
dl.type-7:before {
  background: #46d7cc;
}
dl.type-8:before {
  background: #909093;
}
dl.type-9:before {
  background: #fc8e23;
}
dl.type-10:before {
  background: #957f56;
}
dl.type-11:before {
  background: #9cddb4;
}
dl:nth-of-type(6n+7) {
  clear: left;
  margin-left: 0;
}

dt, dd {
  float: left;
  width: auto;
  font-size: 0.875rem;
  font-family: sans-serif;
  margin: 0 0.5em 0 0;
  line-height: 1.5;
}

dt {
  text-transform: uppercase;
  font-weight: 600;
}

dd {
  font-style: italic;
  color: #383138;
}

dd + dt {
  margin-left: 1em;
}

SassMeister-rendered.html

    <section>
      <h1>File Mix</h1>
      <p>See the types of files currently on your site.</p>
      <figure>
        <span class="type-1" style="width:1.2%" title="png">1.2%</span>
        <span class="type-2" style="width:4.0%" title="css">4.0%</span>
        <span class="type-3" style="width:3.0%" title="gif">3.0%</span>
        <span class="type-4" style="width:19.5%" title="other">19.5%</span>
        <span class="type-5" style="width:7.8%" title="pdf">7.8%</span>
        <span class="type-6" style="width:27.5%" title="php">27.5%</span>
        <span class="type-7" style="width:7.0%" title="sass">7.0%</span>
        <span class="type-8" style="width:9.0%" title="scss">9.0%</span>
        <span class="type-9" style="width:9.0%" title="tiff">9.0%</span>
        <span class="type-10" style="width:2.0%" title="js">2.0%</span>
        <span class="type-11" style="width:10.0%" title="html">10.0%</span>
      </figure>
      <dl class="type-1">
        <dt>png</dt>
        <dd>12</dd>
      </dl>
      <dl class="type-2">
        <dt>css</dt>
        <dd>40</dd>
      </dl>
      <dl class="type-3">
        <dt>gif</dt>
        <dd>30</dd>
      </dl>
      <dl class="type-4">
        <dt>other</dt>
        <dd>195</dd>
      </dl>
      <dl class="type-5">
        <dt>pdf</dt>
        <dd>78</dd>
      </dl>
      <dl class="type-6">
        <dt>php</dt>
        <dd>275</dd>
      </dl>
      <dl class="type-7">
        <dt>sass</dt>
        <dd>70</dd>
      </dl>
      <dl class="type-8">
        <dt>scss</dt>
        <dd>90</dd>
      </dl>
      <dl class="type-9">
        <dt>tiff</dt>
        <dd>90</dd>
      </dl>
      <dl class="type-10">
        <dt>js</dt>
        <dd>20</dd>
      </dl>
      <dl class="type-11">
        <dt>html</dt>
        <dd>100</dd>
      </dl>
    </section>