Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='container'>
  <div class='inner'></div>
</div>

<div class='container big'>
  <div class='inner'></div>
</div>

SassMeister-input.scss

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

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

$size: 100px;

.container {
  width: $size;
  height: $size;
  margin: 20px;
  background: #c00;
  float: left;
  position: relative;
  
  .inner{
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0c0;
    width: 50%;
    padding-bottom: 50%;
    height: 0;
  }
  
  &.big {
    width: $size*2;
    height: $size*2;
  }
}

SassMeister-output.css

.container {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #c00;
  float: left;
  position: relative;
}
.container .inner {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0c0;
  width: 50%;
  padding-bottom: 50%;
  height: 0;
}
.container.big {
  width: 200px;
  height: 200px;
}

SassMeister-rendered.html

<div class='container'>
  <div class='inner'></div>
</div>

<div class='container big'>
  <div class='inner'></div>
</div>