Error generating breakpoint classes when changing smallest breakpoint
- Dominant language
- JavaScript
- Stars
- 29.8k
- Forks
- 5.4k
- Avg merge
- 25m
- Merged PRs (30d)
- 1
Description
## What should happen?
`npm build` should build the project
...
## What happens instead?
`SassError: Invalid null operation: "null times 0.5".`
`$margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) * 0.5 * -1;`
...
## Your Environment
my _grid.scss file:
```
$global-flexbox: true;
$global-width: rem-calc(1200);
$xs: 0;
$sm: 320px;
$md: 769px;
$lg: 1025px;
$xlg: 1140px;
$xxlg: 1440px;
$breakpoints: (
small: 0,
xsmall: $sm,
medium: $md,
large: $lg,
xlarge: $xlg,
xxlarge: $xxlg
);
$grid-column-gutter: (
small: 22px,
xsmall: 50px
);
$-zf-zero-breakpoint: xsmall;
$breakpoint-classes: (xsmall small medium large xlarge xxlarge);
```
full error log:
```
building for production...WARNING: breakpoint(): "sl-remove(xsmall small medium large xlarge xxlarge, small)" is not defined in your `$breakpoints` or `$breakpoints-hidpi` setting.
on line 95 of node_modules/foundation-sites/scss/util/_breakpoint.scss, in function `breakpoint`
from line 155 of node_modules/foundation-sites/scss/util/_breakpoint.scss, in mixin `breakpoint`
from line 327 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `-zf-each-breakpoint-in`
from line 275 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `-zf-each-breakpoint`
from line 82 of node_modules/foundation-sites/scss/grid/_row.scss, in mixin `grid-row-nest`
from line 40 of node_modules/foundation-sites/scss/grid/_classes.scss, in mixin `foundation-grid`
from line 14 of src/main/frontend/scss/main.scss
from line 9 of src/main/frontend/scss/main.vue
WARNING: null was passed to rem-calc(), which is not a number.
on line 83 of node_modules/foundation-sites/scss/util/_unit.scss, in function `-zf-to-rem`
from line 51 of node_modules/foundation-sites/scss/util/_unit.scss, in function `rem-calc`
from line 83 of node_modules/foundation-sites/scss/grid/_row.scss, in mixin `@content`
from line 276 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `@content`
from line 328 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `@content`
from line 171 of node_modules/foundation-sites/scss/util/_breakpoint.scss, in mixin `breakpoint`
from line 327 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `-zf-each-breakpoint-in`
from line 275 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `-zf-each-breakpoint`
from line 82 of node_modules/foundation-sites/scss/grid/_row.scss, in mixin `grid-row-nest`
from line 40 of node_modules/foundation-sites/scss/grid/_classes.scss, in mixin `foundation-grid`
from line 14 of src/main/frontend/scss/main.scss
from line 9 of src/main/frontend/scss/main.vue
assets by status 1.16 MiB [cached] 17 assets
ERROR in ./src/main/frontend/scss/main.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/index.js??clonedRuleSet-9[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/main/frontend/scss/main.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid null operation: "null times 0.5".
on line 83 of node_modules/foundation-sites/scss/grid/_row.scss, in mixin `@content`
from line 276 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `@content`
from line 328 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `@content`
from line 171 of node_modules/foundation-sites/scss/util/_breakpoint.scss, in mixin `breakpoint`
from line 327 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `-zf-each-breakpoint-in`
from line 275 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `-zf-each-breakpoint`
from line 82 of node_modules/foundation-sites/scss/grid/_row.scss, in mixin `grid-row-nest`
from line 40 of node_modules/foundation-sites/scss/grid/_classes.scss, in mixin `foundation-grid`
from line 14 of src/main/frontend/scss/main.scss
from line 9 of src/main/frontend/scss/main.vue
>> $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) * 0.5 * -1;
-------------^
SassError: SassError: Invalid null operation: "null times 0.5".
on line 83 of node_modules/foundation-sites/scss/grid/_row.scss, in mixin `@content`
from line 276 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `@content`
from line 328 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `@content`
from line 171 of node_modules/foundation-sites/scss/util/_breakpoint.scss, in mixin `breakpoint`
from line 327 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `-zf-each-breakpoint-in`
from line 275 of node_modules/foundation-sites/scss/util/_mixins.scss, in mixin `-zf-each-breakpoint`
from line 82 of node_modules/foundation-sites/scss/grid/_row.scss, in mixin `grid-row-nest`
from line 40 of node_modules/foundation-sites/scss/grid/_classes.scss, in mixin `foundation-grid`
from line 14 of src/main/frontend/scss/main.scss
from line 9 of src/main/frontend/scss/main.vue
>> $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) * 0.5 * -1;
-------------^
at Object.loader (/(...)/node_modules/sass-loader/dist/index.js:69:14)
@ ./node_modules/vue-style-loader/index.js!./node_modules/css-loader/index.js??clonedRuleSet-9[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/main/frontend/scss/main.vue?vue&type=style&index=0&lang=scss& 4:14-373
@ ./src/main/frontend/scss/main.vue?vue&type=style&index=0&lang=scss& 1:0-415 1:0-415
@ ./src/main/frontend/scss/main.vue 4:0-65
@ ./src/main/frontend/main.js 106:0-19
webpack 5.70.0 compiled with 1 error in 22857 ms
```
main.scss:14 line is the grid function:

- Foundation version(s) used: 6.7.4
## Checklist
- [x] I have read and follow the CONTRIBUTING.md document.
- [x] There are no other issues similar to this one.
- [x] The issue title and template are correctly filled.
Contributor guide
Research direction
Start by running `npm build` with the reported breakpoint configuration, then inspect `src/main/frontend/scss/main.scss` at line 14 and the Foundation 6.7.4 grid and breakpoint files shown in the stack trace. Compare the configured breakpoints and gutter values with the failing `grid-row.scss` path. Done means the project builds successfully with the smallest breakpoint changed and no null-operation error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, sass, webpack
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100