search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.65k stars 5.49k forks source link

Error generating breakpoint classes when changing smallest breakpoint #12412

Open ricnunes opened 2 years ago

ricnunes commented 2 years ago

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

Checklist

ricnunes commented 2 years ago

just to note that the _grid.scss already has most of the changes of previous issues I've seen here.

ricnunes commented 2 years ago

small update, I've fixed the 'Invalid null operation'. I changed $grid-column-gutter to be equal to 0 and I've added $grid-responsive-column-gutter with the previous contents from the grid-column-gutter.

But I'm still having issues with the sl-remove:

LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./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&
<w> breakpoint(): "sl-remove(xsmall small medium large xlarge xxlarge, xsmall)" is not defined in your `$breakpoints` or `$breakpoints-hidpi` setting.
<w>
<w> node_modules/foundation-sites/scss/util/_breakpoint.scss 95:7    breakpoint()
<w> node_modules/foundation-sites/scss/util/_breakpoint.scss 155:11  breakpoint()
<w> node_modules/foundation-sites/scss/util/_mixins.scss 327:7       -zf-each-breakpoint-in()
<w> node_modules/foundation-sites/scss/util/_mixins.scss 275:3       -zf-each-breakpoint()
<w> node_modules/foundation-sites/scss/grid/_row.scss 82:3           grid-row-nest()
<w> node_modules/foundation-sites/scss/grid/_classes.scss 40:7       foundation-grid()
<w> src/main/frontend/scss/main.scss 14:1                            @import
<w> src/main/frontend/scss/main.vue 9:9                              root stylesheet
<w>
<w> breakpoint(): "sl-remove(xsmall small medium large xlarge xxlarge, xsmall)" is not defined in your `$breakpoints` or `$breakpoints-hidpi` setting.
<w>
<w> node_modules/foundation-sites/scss/util/_breakpoint.scss 95:7    breakpoint()
<w> node_modules/foundation-sites/scss/util/_breakpoint.scss 155:11  breakpoint()
<w> node_modules/foundation-sites/scss/util/_mixins.scss 327:7       -zf-each-breakpoint-in()
<w> node_modules/foundation-sites/scss/util/_mixins.scss 275:3       -zf-each-breakpoint()
<w> node_modules/foundation-sites/scss/grid/_classes.scss 100:3      foundation-grid()
<w> src/main/frontend/scss/main.scss 14:1                            @import
<w> src/main/frontend/scss/main.vue 9:9                              root stylesheet
<w>

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: expected selector.
    ╷
103 │       .sl-remove(xsmall small medium large xlarge xxlarge, xsmall)-1{
    │                 ^
    ╵
  node_modules/foundation-sites/scss/grid/_classes.scss 103:17    @content
  node_modules/foundation-sites/scss/util/_mixins.scss 276:5      @content
  node_modules/foundation-sites/scss/util/_mixins.scss 328:9      @content
  node_modules/foundation-sites/scss/util/_breakpoint.scss 171:7  breakpoint()
  node_modules/foundation-sites/scss/util/_mixins.scss 327:7      -zf-each-breakpoint-in()
  node_modules/foundation-sites/scss/util/_mixins.scss 275:3      -zf-each-breakpoint()
  node_modules/foundation-sites/scss/grid/_classes.scss 100:3     foundation-grid()
  src/main/frontend/scss/main.scss 14:1                           @import
  src/main/frontend/scss/main.vue 9:9                             root stylesheet
SassError: SassError: expected selector.
    ╷
103 │       .sl-remove(xsmall small medium large xlarge xxlarge, xsmall)-1{
    │                 ^
    ╵
  node_modules/foundation-sites/scss/grid/_classes.scss 103:17    @content
  node_modules/foundation-sites/scss/util/_mixins.scss 276:5      @content
  node_modules/foundation-sites/scss/util/_mixins.scss 328:9      @content
  node_modules/foundation-sites/scss/util/_breakpoint.scss 171:7  breakpoint()
  node_modules/foundation-sites/scss/util/_mixins.scss 327:7      -zf-each-breakpoint-in()
  node_modules/foundation-sites/scss/util/_mixins.scss 275:3      -zf-each-breakpoint()
  node_modules/foundation-sites/scss/grid/_classes.scss 100:3     foundation-grid()
  src/main/frontend/scss/main.scss 14:1                           @import
  src/main/frontend/scss/main.vue 9:9                             root stylesheet
    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.71.0 compiled with 1 error in 27029 ms

and my updated settings file:

$global-flexbox: true;
$global-width: rem-calc(1200);

$xs: 0;
$sm: 320px;
$md: 769px;
$lg: 1025px;
$xlg: 1140px;
$xxlg: 1440px;

$breakpoints: (
  xsmall: $xs,
  small: $sm,
  medium: $md,
  large: $lg,
  xlarge: $xlg,
  xxlarge: $xxlg
);

// $grid-column-gutter: (
//   small: 50px,
//   xxlarge: 22px
// );

$grid-column-gutter: 0;

$grid-responsive-column-gutter: (
  xsmall: 50px,
  xxlarge: 22px
);

$-zf-zero-breakpoint: xsmall;
$breakpoint-classes: (xsmall small medium large xlarge xxlarge);
joeworkman commented 2 years ago

I am unsure exactly what I need to do in order to replicate this. You added a extra breakpoint and that is what is causing issues?