Yep, these variables are broken and currently don't seem to do anything. :\

I think I might have found a solution. In you app.scss file, change the order of the imports to:

@import "foundation/settings";
@import "foundation";

Make also sure that all paths are correct.

You can now choose the ranges as wanted.

I resolved (not in brillant way) putting "!default" in _global.scss.

// Media Query Ranges
$small-range: (0em, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em) !default;

Rafael, changin @import sequence priority doesn't work for me.

having the same problem; using the gem, and 5.0.2. can't customize the breakpoints/media queries. everything uses the small by default.

If you're having the same issue i was, the answer is simple but not evident: it's not enough to change the media query ranges, you ALSO need to leave the following uncommented underneath (even if you don't alter the default!)...

$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

AND you have to uncomment this line:
@import "foundation/functions";

If you still have to do this why hasn't the documentation been updated?

I am experiencing weird behavior with media queries as well.

Here is my import order.

@import "_settings.scss"
@import "foundation"
* which automatically @import "_global"

my custom _settings.scss is first because foundation relies on it.

foundation is next, which automatically imports _global.scss

My problem is this:

My custom media queries, which includes a media-query AND legacy code rewrite to adapt to my current project, are in _settings.scss, but the legacy code is first called in _global.scss, which means there are conflicts.

The legacy code appears in foundation/settings, which I copied and pasted into my _settings.scss to use the $variables in my custom rewrite, so in theory it should not be overridden in _global.scss, since it appears in foundation/_settings.scss.

Commenting out legacy code in _global.scss is a quick hack to fix, but will we broken/reversed upon Foundation update, so not ideal.

Anyway, I ramble :) Posting in hopes of helping the community.

Still an issue for me with Foundation 5.5.3. It seems that the need to be "fancy" with media queries calculation is coming back to hunt us all. Why can't it just be straight value or a variable string? Yes, I love em-calc and rem-calc works even better but top bar media query issue has been around since Foundation 4 and is one of the most noticeable feature on RWD.

P.S. I tried every possible solution suggested in the many top bar threads, none resolve the issue. I honestly think that a better way to approach this would be to provide an always mobile setting and let everyone use visibility classes to hide/show the top bar.

The strange part is that if I comment the $topbar-breakpoint and $topbar-media-query I get the uncollapsed version of the top bar but as soon as I make any adjustments to these variables or to the Media Query Ranges, the menu items (top-bar-section) disappear and the only visible items are the .top-bar and .title-area...

Anyone came across a similar issue?

Last comment on this thread solved my issue. Hope this helps someone. http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss