Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Scale
// Requires SASS >= 3.3 and responsive.scss
// https://gist.github.com/maxluster/168e650267bac9faaafd
//
// Scale value with $width for each $width in $named-breakpoints map.
// Usage : @include responsive("font-size", $base-font-size + px,
// resp-scale($base-width, $base-font-size));
@function resp-scale($width, $value, $scale-up: false) {
$m : ();
@each $k, $v in $named-breakpoints {
$ok : true;
$v: $v / ($v * 0 + 1); // strip-units
@if $v > $width {
$ok : $scale-up;
}
@if $ok {
$res : round($v * $value / $width);
$m: map-merge($m, ("#{$k}": $res +'px'));
}
}
@return $m;
}
@zboralski

This comment has been minimized.

Copy link
Owner Author

zboralski commented Sep 3, 2014

The cool thing is that if your properties are exclusively set in rem then the following @include is all you need to scale everything to any width!

@import "responsive"; // https://gist.github.com/maxluster/168e650267bac9faaafd

$named-breakpoints: (
   "320" : 320px,
   "480" : 480px,
   "iphone5" : 540px,
   "iphone5-max" : 568px,
   "android" : 640px,
   "ipad-min": 768px,
   "tablet-min": 800px,
   "big1": 1400px,
   "big2": 1600px,
   "big3": 1800px,
   "big4": 2000px,
); 

@include responsive("font-size", $base-font-size + px, resp-scale($base-width, $base-font-size));

If you want to scale up (when breakpoint width is greater than the base width), set the $scale-up argument to true.

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.