Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="grid">
  <li><a href="#">one</a></li>
  <li><a href="#">two</a></li>
  <li><a href="#">three</a></a></li>
  <li><a href="#">four</a></li>
  <li><a href="#">five</a></li>
  <li><a href="#">six</a></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

.grid{
    list-style: none;
    text-align: center;
    clear: both;
    width: 98%;
    margin: 0px auto;
    border:1px dashed #999;
    li{
      display: inline-block;
      background: #ccc;
      width: 10%;
      height: 0; /* height 0 with a padding-bottom of the width % creates a responsive box */
      padding-bottom: 10%;
      margin: 1.5%;
      color: #fff;
      a{
        display:block;
        width:100%;
        height:100%;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 10px;
      }
    }
}

SassMeister-output.css

.grid {
  list-style: none;
  text-align: center;
  clear: both;
  width: 98%;
  margin: 0px auto;
  border: 1px dashed #999;
}
.grid li {
  display: inline-block;
  background: #ccc;
  width: 10%;
  height: 0;
  /* height 0 with a padding-bottom of the width % creates a responsive box */
  padding-bottom: 10%;
  margin: 1.5%;
  color: #fff;
}
.grid li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
}

SassMeister-rendered.html

<ul class="grid">
  <li><a href="#">one</a></li>
  <li><a href="#">two</a></li>
  <li><a href="#">three</a></a></li>
  <li><a href="#">four</a></li>
  <li><a href="#">five</a></li>
  <li><a href="#">six</a></li>
</ul>