Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div><div class="Box">
  <div class="Box-inner">
  </div>
</div><div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div><div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

// Offset positioning helpers
// Source: http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
// -------------------------------------------------------------------------------------------------

@mixin position($position, $args: ()) {
  $offsets: top right bottom left;
  position: $position;

  @each $offset in $offsets {
    $index: index($args, $offset);

    @if $index {
      @if $index == length($args) {
        #{$offset}: 0;
      }
      @else {
        $next: nth($args, $index + 1);
        @if position-is-valid-length($next) {
          #{$offset}: $next;
        }
        @else if index($offsets, $next) {
          #{$offset}: 0;
        }
        @else {
          @warn "Invalid value `#{$next}` for offset `#{$offset}`.";
        }
      }
    }
  }
}

// Function checking if $value is a valid length

@function position-is-valid-length($value) {
  @return (type-of($value) == "number" and not unitless($value))
       or (index(auto initial inherit 0, $value) != false);
}

// Shorthands

@mixin absolute($args: ()) {
  @include position(absolute, $args);
}

@mixin fixed($args: ()) {
  @include position(fixed, $args);
}

@mixin relative($args: ()) {
  @include position(relative, $args);
}

.Box
{
  float: left;
}

.Box
{
  position: relative;
  width:10%;
  margin-right:0.1%;
  margin-bottom:0.1%;
  height:0;
  padding-bottom: 10%;
  .Box-inner
  {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background: #F4F4F4;
  }
}

SassMeister-output.css

.Box {
  float: left;
}

.Box {
  position: relative;
  width: 10%;
  margin-right: 0.1%;
  margin-bottom: 0.1%;
  height: 0;
  padding-bottom: 10%;
}
.Box .Box-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F4F4F4;
}

SassMeister-rendered.html

<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div><div class="Box">
  <div class="Box-inner">
  </div>
</div><div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div><div class="Box">
  <div class="Box-inner">
  </div>
</div>
<div class="Box">
  <div class="Box-inner">
  </div>
</div>