Libsass Error - foundation-sites/scss/components/_off-canvas.scss

Getting build failures in Codekit - it keeps giving the following error::
Libsass: Error: (small: 250px) isn't a valid CSS value. on line 12:19 of THEME/node_modules/foundation-sites/scss/components/_off-canvas.scss
I have tried changing this to rem, % and back to 250px - This fixed the Libsass error previously, but this time it’s not flushing the error. I think it’s a false-positive error.

The file is the same as that here: https://github.com/foundation/foundation-sites/blob/0f9fea524fec599999fdd952d55de94635f75227/scss/components/_off-canvas.scss

Sounds like a general LibSass error / problem. I’m not sure what or if we have to change something. Maybe Codekit has to update the LibSass version or check this in detail.

In which order do you import all scss files and which ones?

Here’s the sitejs.js file…
I use this to compile all the JS into one file, that is minified through CodeKit.

import $ from '../inc/npm/node_modules/jquery/dist/jquery.js';
import 'navigation';
import 'skip-link-focus-fix';
import 'google-map-init';
import 'scroll-to-top';
import '../inc/npm/node_modules/what-input/dist/what-input.js';
import '../inc/npm/node_modules/motion-ui/dist/motion-ui.js';
import '../inc/npm/node_modules/foundation-sites/js/foundation.js';
import 'app';

$(document).foundation();

Probably should have mentioned, this is in a WordPress theme.

I meant the scss file for your setup. As mentioned, probably just a LibSass issue (maybe outdated). Because so far I did not see this issue in projects but we also did not use Codekit for them.

Apologies Daniel… I am suffering the lack of caffeine today.

@charset 'utf-8';
@import '../inc/npm/node_modules/foundation-sites/scss/foundation';
@import 'settings';
@import '../inc/npm/node_modules/motion-ui/motion-ui';

@include foundation-global-styles;
// @include foundation-grid;
@include foundation-float-classes;
@include foundation-flex-classes;
@include foundation-flex-grid;
@include foundation-xy-grid-classes;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-media-object;
@include foundation-pagination;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-tooltip;
@include foundation-visibility-classes;
@include foundation-prototype-classes;
@include motion-ui-transitions;
@include motion-ui-animations;

// @include foundation-range-input;
// @include foundation-label;
@include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-progress-bar;
// @include foundation-progress-element;
// @include foundation-progress-element;
// @include foundation-meter-element;
// @include foundation-slider;
// @include foundation-switch;
// @include foundation-title-bar;
@include foundation-top-bar;

I remember having this same issue before, but simply changing the 250px to 15.625rem, then back to 250px fixed the last time.
I don’t see this as a Foundation issue, but trying to identify the cause is proving to be a problem.

The order seems a bit weird compared to https://github.com/foundation/foundation-zurb-template/blob/2ce1e137d63db12715f667a5edcb5b32119c6330/src/assets/scss/app.scss (imports and includes).

Resolved
The order of the imports etc is from the old version of Foundation-Sites that was running on the site. When updated to the latest, Codekit kept the Foundation files where they were, instead of moving them to /inc/npm/node_modules.
I have moved them manually, reset settings in the CodeKit config., and amended locations where needed.
Earlier, I had an error about $offcanvas-size & $offcanvas-vertical-size being changed to $offcanvas-sizes & $offcanvas-vertical-sizes.
After moving & re-installing the latest version of Foundation-sites, I found the _settings.scss file had $offcanvas-size & $offcanvas-vertical-size referenced - corrected these, and the error was fixed.
Wanted to add this, incase anyone else runs into same issue.

Awesome, so it was a combination of outdated settings file (always merge with our latest version) and a changed structure.

Good to know in the future where to look at. And I think I was not aware of the fact that Foundation Sites was upgraded and the project migrated to the new setup.