Skip to content

Instantly share code, notes, and snippets.

@sirbrad
Created August 21, 2012 11:07
Show Gist options
  • Save sirbrad/3414563 to your computer and use it in GitHub Desktop.
Save sirbrad/3414563 to your computer and use it in GitHub Desktop.
calculate percent
$site-width: 962px;
@function calc-percent($target, $container) {
// $container: $site-width !default; fails :(
@return ($target / $container) * 100%;
}
.foo {
width: calc-percent(387px, $site-width);
}
.boo {
width: calc-percent(387px); // this would be great but fails
}
// It would awesome if we could get $container to default to $site-width
// if only a $target is passed. I checked out sass @if and !default but it always
// kicked up a stink when being passed 1 param.
@Integralist
Copy link

@sirbrad why not use the default argument setting? See https://github.com/Integralist/Passage/blob/master/public/Assets/Styles/Sass/Functions/_fontsize.scss

e.g.

@function font-sizing ($target, $container: $site-width) {
    @return ($target / $container) * 100%;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment