Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="square-a">static</div>
<div class="square-b">
  <span>fluid</span>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// Susy (v2.1.2)
// ----

@import "susy";

@include layout(50% 6 (4em 1em));

body { @include container; }

// Static width/height is simple
.square-a {
  @include span(2 static);
  height: span(2 static);
}

// Fluid takes a bit more work
.square-b {
  @include span(2);
  height: 0;
  // %-Padding is always relative to parent width
  padding-top: span(2);
  position: relative;
  
  // Inner element positioned to fit space
  span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

// For demo purposes
div { outline: 1px solid; }

SassMeister-output.css

body {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
body:after {
  content: " ";
  display: block;
  clear: both;
}

.square-a {
  width: 9em;
  float: left;
  margin-right: 1em;
  height: 9em;
}

.square-b {
  width: 31.03448%;
  float: left;
  margin-right: 3.44828%;
  height: 0;
  padding-top: 31.03448%;
  position: relative;
}
.square-b span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

div {
  outline: 1px solid;
}

SassMeister-rendered.html

<div class="square-a">static</div>
<div class="square-b">
  <span>fluid</span>
</div>