foundation / foundation/yeti

Error generating breakpoint classes when changing smallest breakpoint

Open
#12,412 3 comments 0 reactions 0 assignees View on GitHub
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:

![image](https://user-images.githubusercontent.com/2053111/161257510-8dd0394f-29dc-48eb-89b9-5280ba952799.png)

- 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.