Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="square-a">static</div>
<div class="square-b">
<span>fluid</span>
</div>
// ----
// 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; }
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;
}
<div class="square-a">static</div>
<div class="square-b">
<span>fluid</span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.