Skip to content

Instantly share code, notes, and snippets.

@paulozoom
Created February 26, 2015 11:42
Show Gist options
  • Save paulozoom/4ed74bc4a891d7340904 to your computer and use it in GitHub Desktop.
Save paulozoom/4ed74bc4a891d7340904 to your computer and use it in GitHub Desktop.
Ratio module
.ratio {
display: block;
position: relative;
height: 0;
padding: 0;
}
// Nesting for variable scoping
.ratio-- {
// Named ratios
&square { padding-top: 100%; }
// Math ratios
$ratios: (16 10, 4 3);
// Output math ratios
@each $ratio in $ratios {
$w: nth($ratio,1);
$h: nth($ratio,2);
&#{$w}-#{$h} {
padding-top: percentage($h / $w);
}
}
}
.ratio__container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment