Foundation-sites: Sass Error when changing breakpoints.

[christianmagill]

I get a compilation error when changing breakpoints using the example code.

$breakpoints: (
small: rem-calc(0),
medium: rem-calc(640),
large: rem-calc(1024),
xlarge: rem-calc(1200),
xxlarge: rem-calc(1440)
);

Libsass 3.4.1

bower_components/foundation-sites/scss/util/_unit.scss
Error: argument $number of unit($number) must be a number

   Backtrace:
    bower_components/foundation-sites/scss/util/_unit.scss:49, in function `unit`
    bower_components/foundation-sites/scss/util/_unit.scss:49, in function `-zf-bp-to-em`
    bower_components/foundation-sites/scss/util/_breakpoint.scss:146, in function `-zf-bp-serialize`
    bower_components/foundation-sites/scss/foundation.scss:52
    on line 49 of bower_components/foundation-sites/scss/util/_unit.scss

@if unit($value) == 'px' or unit($value) == '' {
------^

[cietho]

Hey @christianmagill - i got the same error when i tried to create my own breakpoints. All you have to do is to add one breakpoint more into your $breakpoints and don't add it to the $breakpoint-classes.

In your example just add something like xxxlarge:rem-calc(9999) and compile again. Or just remove the xxlarge from your $breakpoint-classes.

I will check the Code later, becuase I don't know if it is a bug or a feature. ;)

[gakimball]

Try using pixel values instead and see if that fixes it. (They still get converted to em for the media queries.)

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

[zurbrandon]

Wondering if the pixel value helped in this situation?

[gakimball]

Looking at this closer, I realize it's happening because rem-calc() is not defined in your Sass code yet, so the breakpoint converter is trying to convert the value rem-calc(640) instead of, say, 40rem. Verify that _settings.scss has @import 'util/util' at the top; this is what will load rem-calc() into your Sass.

If that doesn't work, if you revert to pixel values, the error will go away. Any value you put in there is converted to ems at the end.

Related: #7021

[tyteen4a03]

I don't have custom breakpoints declared and I'm running into this error.

{ [Error: node_modules/foundation-sites/scss/util/_unit.scss
Error: argument $number of unit($number) must be a number

   Backtrace:
    node_modules/foundation-sites/scss/util/_unit.scss:57, in function `unit`
    node_modules/foundation-sites/scss/util/_unit.scss:57, in function `-zf-bp-to-em`
    node_modules/foundation-sites/scss/components/_visibility.scss:9, in mixin `show-for`
    resources/assets/sass/_frame.scss:9
    on line 57 of node_modules/foundation-sites/scss/util/_unit.scss
>>   @if unit($value) == 'px' or unitless($value) {

_frame.scss:9 is @include show-for(medium up);. I'm not sure what's wrong. I have just upgraded from Foundation 5 but my other project (Foundation 6 fresh start) doesn't have this problem. I tried reinstalling through npm but it didn't work.