SASS styling of metro-like interface

metro.scss

#metro {
  color: white;
  display: table;
  float: right;
  height: 30%;
  margin-top: 20px;
  width: 75%;

  @for $i from 1 through length($colors) {
    .metro-box:nth-of-type(#{$i}) {
      background: nth($colors, $i);
    }
  }

  .metro-box {
    cursor: pointer;
    display: inline-block;
    height: 100px;
    margin: 15px;
    text-align: center;
    width: 100px;

    &:hover {
      box-shadow: 3px 4px 3px #DDDDDD;
    }

    * {
      padding-top: 30%;
    }

    i {
      font-size: 40px;
      margin-top: 30%;
    }
  }
}