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

[nexocentric]

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.

[brettsmason]

@nexocentric Thanks for the thorough write up! I haven't personally used the flex grid yet, but I'm hoping someone with a bit more knowledge of it may be able to help: @andycochran @kball any ideas?

[andycochran]

The docs say to include Flexbox with @include foundation-everything(true); in your main .scss file. Have you tried that instead of @include foundation-everything($flex: true);?

[nexocentric]

I most definitely have. The same error occurs whether or not the parameter is named.

[andycochran]

Hmm… Could this be an issue with Jekyll's built-in SCSS compiler? I imagine it's quite different from gulp-sass.

[nexocentric]

I believe Jekyll leverages the latest version of the Linux standard Sass compiler on the system. I my case that would be Selective Steve.

Additionally, I don't think the compiler difference would explain why the scripts work if I include them like:

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

But they don't work when I include them like this:

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

[nexocentric]

If you take a look at the issues section of the gulp-sass project, they state that gulp-sass is just a wrapper around bindings for libsass.

I found a little comparison on the differences between libsass and Ruby Sass.

I still haven't been able to determine if Jekyll uses libsass or Ruby Sass. However, both versions currently support the global variable declaration.

[kball]

@ncoden I know you've been looking a lot at the scss and flexbox stuff, do you have a sense of what might be going on here?

[andycochran]

Selective Steve = Sass 3.4 (should be fine). You just need Ruby Sass 3.4+ or node-sass 3.4.2+ (libsass 3.3.2). @gakimball, is your https://github.com/zurb/foundation-sites/issues/8154#issuecomment-184307964 relevant?

[ncoden]

Hi,

http://foundation.zurb.com/forum/posts/38716-global-flexbox-error

This may solve the problem:

https://github.com/zurb/foundation-sites/commit/7a3fd7bd409d69eb3b50132380ea01910aeb0c58

[nexocentric]

@ncoden I've already found a workaround for the problem and documented it in the bug description above. It's in the section labeled 'What I've Confirmed'

[ncoden]

@nexocentric Yes, but it's a hack to fix a bug, a little dirty ;)

[nexocentric]

@ncoden 100% agreed! That's why I posted the bug report.

I don't quite understand the fix that you posted. I looked at Fix CSS for top bar stacking being in the wrong place.

[ncoden]

I was invoked by @kball. Please refer to him for my presence usefulness issues.

Invocation Code L1722, Paragraph 3:
Invoker has the full responsibility of the estimed utility of invoked individuals.

[ncoden]

@nexocentric In your "fix", did you checked that "$global-flexbox: true !global;" generate the flexblox ? I think you should set configuration variables before importing bootstrap, because mixins are statically generated with this configuration.

Maybe your "fix" seems to be a "fix" - _i'll continue using quotes around this word, your thing is really a hack :)_ - only because you disabled flexbox, so the topbar bugged mixin isn't used.

I don't quite understand the fix that you posted

I'm not sure to understand too, but I think that @include top-bar-stacked; in topbar is in the wrong place, and generate properties outside the selector, or in a wrong selector.

[nexocentric]

@ncoden No I didn't disable the flexbox.

Lines 53 - 55 of the foundation.scss the $global-flexbox variable is being declared as:

@if $flex {
    $global-flexbox: true !global;
}

I discovered that removing the !global declaration gets rid of the error that is happening. However, this means that the variable isn't available for use in other places that it used. This disable flexbox and I would like to use flexbox.

I changed foundation.scss lines 53 - 55 to:

@if $flex {
    $global-flexbox: true;
}

Now I can include @include foundation-everything($flex: true); with no problems. However, in order for it to still be global, I need to redeclare the same variable as global. Hence:

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

$global-flexbox: false !global; //here $global-flexbox is false
@include foundation-everything($flex: true); //here $global-flexbox gets changed to true

The hack is, I had to go into foundation.css to change code. However, flexbox is enabled.

[ncoden]

Yes, I misundestood sass variables behavior: statics but not inside mixins. So I don't see where the error come from. Why does this work with your fix. Maybe the problem is still here, but you only misleaded Jekyll.

Whatever, did you tried https://github.com/zurb/foundation-sites/commit/7a3fd7bd409d69eb3b50132380ea01910aeb0c58 ?

[kball]

I believe this was fixed in 6.2.1, please reopen if you're still running into it.