Skip to content

Instantly share code, notes, and snippets.

@daphotron
Created November 21, 2013 22:16
Show Gist options
  • Select an option

  • Save daphotron/7590739 to your computer and use it in GitHub Desktop.

Select an option

Save daphotron/7590739 to your computer and use it in GitHub Desktop.
Ratio function: helps find corresponding width or height. http://sassmeister.com/gist/7590739
<div class="box box1"></div>
<div class="box box2"></div>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@import "compass";
// Strip unit type.
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
// Return numeric value of corresponding ratio.
@function ratio($type, $value, $horizvalue, $vertvalue) {
$output: '';
@if $type == "height" {
$output: strip-unit(round($value * $vertvalue / $horizvalue));
} @else if $type == "width" {
$output: strip-unit(round($value * $horizvalue / $vertvalue));
}
@return $output;
}
$value1: 160px;
$value2: 400px;
.box {
background: #ccc;
margin: 1em;
}
.box1 {
height: #{ratio(height, $value1, 16, 9)}px;
width: $value1;
}
.box2 {
height: $value2;
width: #{ratio(width, $value2, 3, 4)}px;
}
.box {
background: #ccc;
margin: 1em;
}
.box1 {
height: 90px;
width: 160px;
}
.box2 {
height: 400px;
width: 300px;
}
<div class="box box1"></div>
<div class="box box2"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment