foundation-sites: $global-flexbox variable initialization throwing property error

Background

I fetched the initial foundation setup using npm to initialize a foundation-sites project using either basic or Zurb templates. After that I integrated the sass files into my project to work with and compiled my site using Jekyll. I’m using Jekyll to build and serve my site.

How can we reproduce this bug?

1. Setup Sass for use with Jekyll
2. Include foundation-everything as @include foundation-everything($flex: true); or @include foundation-everything($flex: false);
3. Run jekyll serve

Note: Including foundation-everything as @include foundation-everything; does not cause any problems. Problems are only caused when one attempts to specify a parameter for the mixin.

What did you expect to happen? The sass files to compile to a single css file with no problems.

What happened instead? The following error is returned: Error: Properties are only allowed within rules, directives, mixin includes, or other properties. on line 80.

What I have confirmed I went through the Sass source files and found what I think is the root of the problem.

In the file foundation.scss file the following line (where the $global-flexbox variable is being initialized) seems to be causing the problem. $global-flexbox: true !global;

Removing the global statement from this line seems to remedy the problem. $global-flexbox: true;

I then created an app.scss file that declares the $global-flexbox variable as global and sets it to an initial value of false.

@import 'settings/settings';
@import 'foundation';

// $global-text-direction: rtl;
$global-flexbox: false !global;
@include foundation-everything($flex: true);

This remedies the problem. I don’t know why this works, but it does. No errors are thrown and everything compiles normally.

Side notes I have attempted to see whether the version of the sass compiler included with the version of Jekyll I was using did not allow for the !global modifier. However, the modifier works with no issues.

Including foundation everything using the method below doesn’t create any problems. However, this method isn’t desirable.

* {
    @include foundation-everything($flex: true);
}

If you need anymore information please feel free to let me know. I’ll do my best to provide you with details.