Skip to content

Instantly share code, notes, and snippets.

@i-like-robots
Last active January 4, 2016 16:09
Show Gist options
  • Save i-like-robots/22644465d832b1d54f30 to your computer and use it in GitHub Desktop.
Save i-like-robots/22644465d832b1d54f30 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
// Full range of available breakpoints
$global-breakpoints: (
'XS': 300px,
'S': 490px,
'M': 740px,
'L': 980px,
'XL': 1220px
);
// Range of breakpoints available due to any limitation
$available-breakpoints: ('XS': 1, 'XL': 3);
@function nearest-breakpoint($available-breakpoints, $target-name) {
$available-keys: map-keys($available-breakpoints);
$all-keys: map-keys($global-breakpoints);
$nearest: 1;
$target-index: index($all-keys, $target-name);
$difference: abs($target-index - $nearest);
@each $key in $available-keys {
$i: index($available-keys, $key);
$relative-index: index($all-keys, $key);
$new-difference: abs($target-index - $relative-index);
@if ($new-difference < $difference) {
$difference: $new-difference;
$nearest: $i;
}
}
@return nth($available-keys, $nearest);
}
.the-nearest-available-breakpoint {
to-S: nearest-breakpoint($available-breakpoints, 'S' );
to-M: nearest-breakpoint($available-breakpoints, 'M' );
to-L: nearest-breakpoint($available-breakpoints, 'L' );
}
.the-nearest-available-breakpoint {
to-S: "XS";
to-M: "XS";
to-L: "XL";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment