Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Responsive Scale
// Requires SASS >= 3.3 and responsive.scss
// 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;

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"; //

$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.