Sass Compilation Error in 6.3.1 #12039

bmoellers · 2020-03-31T17:46:30Z

What should happen?

I am trying to upgrade my ember project. We include foundation but the newer versions of ember upgraded jQuery and thus broke the current version of foundation. To fix that I updated the version to 6.3.1 however it no longer imports.

Basically we do copy foundation min from the node modules:
new Funnel(new UnwatchedDir('node_modules/foundation-sites/dist/js'), { files: ['foundation.min.js'] })

Then we import that in to our vendor file. This all worked with previous builds.

Our app.scss looks this this:

@import "settings";
@import "foundation";
@include foundation-everything;
@import "globals";

@import "mixins/responsive";
@import "mixins/flex-layout";
@import "mixins/cta-button";
@import "mixins/sprite-helpers";

@import "sprites";
@import "sstfonts";

@import "layout-common-component";

@import "multi-line-buttons";
@import "wizard-buttons";
@import "stacked-buttons";
@import "redeem-code";
@import "info-table";
@import "handle-korra-exception";
@import "scroll-fader";
@import "warning-text";
@import "manage-credit-card";
@import "ember-power-calendar";
@import "modal-dialog";

// This needs the scss extension because component-css generates both a .scss and .css file
@import "pod-styles.scss";

What happens instead?

Now when we import this, it fails with the following.

Sass Syntax Error (SassCompiler) in /Users/bmoellers/GitHub/personal/valkyrie-transact/node_modules/foundation-sites/scss/util/_breakpoint.scss:176:28

Error: Undefined operation: "3 lte null".
on line 176 of node_modules/foundation-sites/scss/util/_breakpoint.scss, in mixin breakpoint
from line 45 of node_modules/foundation-sites/scss/components/_reveal.scss
from line 40 of tmp/sass_compiler-input_base_path-syxudCsS.tmp/app/styles/_foundation.scss
from line 3 of tmp/sass_compiler-input_base_path-syxudCsS.tmp/app/styles/app.scss

  @if $bp != null and ($bp <= $pbp or $dir == down) {

---------------------------^

Possible Solution

...

Test Case and/or Steps to Reproduce (for bugs)

Test Case:

How to reproduce:
1.
2.
3.

Context

Just trying to update to the newest version of ember.

Your Environment

Foundation version(s) used:
Browser(s) name and version(s):
Device, Operating System and version:
Link to your project:

Checklist

I have read and follow the CONTRIBUTING.md document.
There are no other issues similar to this one.
The issue title and template are correctly filled.

The text was updated successfully, but these errors were encountered:

DanielRuf · 2020-03-31T18:05:16Z

Hi @bmoellers,

which sass version do you use?
Did you also copy the new scss files including the sass-lists and util files?

Maybe you are missing some files.
See https://unpkg.com/browse/foundation-sites@6.3.1/scss/foundation.scss

bmoellers · 2020-03-31T18:09:57Z

Not sure what version of sass that ember-cli-sass version 6.0 includes to be honest. We include the compiled min version of the foundation.js but we include files directly from the node modules in our scss file.

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// Third-party libraries
//@import 'bower_components/foundation-sites/scss/vendor/normalize';

// Sass utilities
@import 'node_modules/foundation-sites/scss/util/util';

// Global variables and styles
@import 'node_modules/foundation-sites/scss/global';

// Components
@import 'node_modules/foundation-sites/scss/grid/grid';
@import 'node_modules/foundation-sites/scss/typography/typography';
@import 'node_modules/foundation-sites/scss/forms/forms';
@import 'node_modules/foundation-sites/scss/components/visibility';
@import 'node_modules/foundation-sites/scss/components/float';
@import 'node_modules/foundation-sites/scss/components/button';
@import 'node_modules/foundation-sites/scss/components/button-group';
@import 'node_modules/foundation-sites/scss/components/accordion-menu';
@import 'node_modules/foundation-sites/scss/components/accordion';
@import 'node_modules/foundation-sites/scss/components/badge';
@import 'node_modules/foundation-sites/scss/components/breadcrumbs';
@import 'node_modules/foundation-sites/scss/components/callout';
@import 'node_modules/foundation-sites/scss/components/close-button';
@import 'node_modules/foundation-sites/scss/components/drilldown';
@import 'node_modules/foundation-sites/scss/components/dropdown-menu';
@import 'node_modules/foundation-sites/scss/components/dropdown';
@import 'node_modules/foundation-sites/scss/components/flex-video';
@import 'node_modules/foundation-sites/scss/components/label';
@import 'node_modules/foundation-sites/scss/components/media-object';
@import 'node_modules/foundation-sites/scss/components/menu';
@import 'node_modules/foundation-sites/scss/components/off-canvas';
@import 'node_modules/foundation-sites/scss/components/orbit';
@import 'node_modules/foundation-sites/scss/components/pagination';
@import 'node_modules/foundation-sites/scss/components/progress-bar';
@import 'node_modules/foundation-sites/scss/components/reveal';
@import 'node_modules/foundation-sites/scss/components/slider';
@import 'node_modules/foundation-sites/scss/components/sticky';
@import 'node_modules/foundation-sites/scss/components/switch';
@import 'node_modules/foundation-sites/scss/components/table';
@import 'node_modules/foundation-sites/scss/components/tabs';
@import 'node_modules/foundation-sites/scss/components/title-bar';
@import 'node_modules/foundation-sites/scss/components/top-bar';
@import 'node_modules/foundation-sites/scss/components/thumbnail';
@import 'node_modules/foundation-sites/scss/components/tooltip';

@mixin foundation-everything {
  @include foundation-global-styles;
  // @include foundation-grid;
  @include foundation-flex-grid;
  @include foundation-typography;
  @include foundation-button;
  @include foundation-forms;
  @include foundation-visibility-classes;
  @include foundation-float-classes;
  // @include foundation-accordion;
  // @include foundation-accordion-menu;
  // @include foundation-badge;
  // @include foundation-breadcrumbs;
  // @include foundation-button-group;
  @include foundation-callout;
  // @include foundation-close-button;
  // @include foundation-drilldown-menu;
  // @include foundation-dropdown;
  // @include foundation-dropdown-menu;
  // @include foundation-flex-video;
  @include foundation-label;
  // @include foundation-media-object;
  // @include foundation-menu;
  // @include foundation-off-canvas;
  // @include foundation-orbit;
  // @include foundation-pagination;
  // @include foundation-progress-bar;
  // @include foundation-slider;
  // @include foundation-sticky;
  // @include foundation-reveal;
  @include foundation-switch;
  @include foundation-table;
  // @include foundation-tabs;
  // @include foundation-thumbnail;
  // @include foundation-title-bar;
  // @include foundation-tooltip;
  // @include foundation-top-bar;
}

bmoellers · 2020-03-31T18:27:53Z

I upgraded to ember-cli-sass version 10 which allows you to use the sass version you want and that is 1.26.3. Still has the same problem.

DanielRuf · 2020-03-31T19:09:45Z

So this can be ruled out.

The code which returns null is $pbp: index($-zf-breakpoints-keys, $print-breakpoint);.

So it seems the $print-breakpoint is not set or $-zf-breakpoints-keys does not contain it.

You can test the values with @debug $-zf-breakpoints-keys and @debug $print-breakpoint.

DanielRuf · 2020-03-31T19:11:27Z

These are the default values:

/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
/// @type Map
$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
) !default;

/// The largest named breakpoint in which to include print as a media type
/// @type Keyword
$print-breakpoint: large !default;

$-zf-zero-breakpoint: small !default;

$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');

DanielRuf · 2020-03-31T19:20:17Z

Not sure why this mixin is even used here. See https://github.com/foundation/foundation-zurb-template/blob/2706b837898c0d6c21913538f724c4924fa50e18/src/assets/scss/app.scss for an example setup. Including the settings file at https://github.com/foundation/foundation-zurb-template/blob/2706b837898c0d6c21913538f724c4924fa50e18/src/assets/scss/_settings.scss

Use the mixin OR the list of imports.

I recommend to go with the long list of imports. See https://get.foundation/sites/docs/sass.html#adjusting-css-output

bmoellers · 2020-03-31T19:32:28Z

I found our settings file. It did not have a full list of the breakpoints so that was the problem. Of course then I get another breakage because:

Sass Syntax Error (SassCompiler) in /Users/bmoellers/GitHub/personal/valkyrie-transact/node_modules/foundation-sites/scss/util/_color.scss:21:10

Error: $color: foreground(#5887F5) is not a color.
╷
21 │ $rgba: red($color), green($color), blue($color);

So I am not sure where they got the foreground from but I assume it is not defined somewhere.

DanielRuf · 2020-03-31T21:58:19Z

So I am not sure where they got the foreground from but I assume it is not defined somewhere.

Do you use an old version of the settings file? Also see foundation/foundation-rails#214

You can see it in https://unpkg.com/browse/foundation-sites@6.2.4/scss/settings/_settings.scss but not in https://unpkg.com/browse/foundation-sites@6.3.0/scss/settings/_settings.scss

When you upgrade Foundation Sites you also have to migrate the settings.

bmoellers · 2020-03-31T23:38:58Z

I am sure the settings file is old. I checked the history and they reverted changes in it several times after the last foundation update. That was before I was even ever aware of the project. I guess that is the problem with working for a larger company with very strict brand and UX considerations... I can update it and then see what happens or I can try and cherry pick changes. Either way is going to be a lot of work. I do know that if I remove the foreground function it will then compile so that is the last hurdle. I will probably just do a best guess and then work backwards to see what changes are needed. At least I learned to trouble shoot SASS and foundation much better for any future issues.

DanielRuf · 2020-03-31T23:56:44Z

If you miss anything you can get it from https://unpkg.com/browse/foundation-sites@6.2.4/scss/util/_color.scss and the other files, like the foreground function.

bmoellers · 2020-04-01T14:26:18Z

I copied over the settings files and it fixes all the compilation issues. But the main problem is that everything became super small.

I noticed the breakpoint sizes changed so I tried setting them back to what was there before but it remains super small. Do you know what possibly changed to control this size change? And what I can do to get it back to the larger size?

DanielRuf · 2020-04-01T15:08:08Z

Do you mean the global font size? This can be set in the settings too.

You may want to check if the browser window is zoomed or from where the smaller values come from.

DanielRuf added the scss label Mar 31, 2020

joeworkman closed this as completed Aug 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sass Compilation Error in 6.3.1 #12039

Sass Compilation Error in 6.3.1 #12039

bmoellers commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

bmoellers commented Mar 31, 2020 •

edited by DanielRuf

Loading

bmoellers commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

bmoellers commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

bmoellers commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

bmoellers commented Apr 1, 2020

DanielRuf commented Apr 1, 2020

Sass Compilation Error in 6.3.1 #12039

Sass Compilation Error in 6.3.1 #12039

Comments

bmoellers commented Mar 31, 2020

What should happen?

What happens instead?

Possible Solution

Test Case and/or Steps to Reproduce (for bugs)

Context

Your Environment

Checklist

DanielRuf commented Mar 31, 2020

bmoellers commented Mar 31, 2020 • edited by DanielRuf Loading

bmoellers commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

bmoellers commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

bmoellers commented Mar 31, 2020

DanielRuf commented Mar 31, 2020

bmoellers commented Apr 1, 2020

DanielRuf commented Apr 1, 2020

bmoellers commented Mar 31, 2020 •

edited by DanielRuf

Loading