Foundation 6 does not generate any styles

Question

I have setup a new project to test Foundation 6 using Gulp and Sass but it doesn\'t seem to compile at all. There is another post close to this topic, but I personally belie

Answer 1

For true Zurb newbies like me, here's the answer I was looking for (and have just wasted hours trying to find).

When you install Foundation 6, you end up with an SCSS file beginning something like this:

// Dependencies
@import '../_vendor/normalize-scss/sass/normalize';  
@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies'; 
@import '../_vendor/sassy-lists/stylesheets/helpers/true';
@import '../_vendor/sassy-lists/stylesheets/functions/purge';
@import '../_vendor/sassy-lists/stylesheets/functions/remove';
@import '../_vendor/sassy-lists/stylesheets/functions/replace';
@import '../_vendor/sassy-lists/stylesheets/functions/to-list';

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

This runs the code in the SCSS files to generate variables and mix-ins. Here's an example of a variable:

$dropdown-padding: 1rem !default;

Here's an example of a mix-in:

@mixin foundation-typography {
  @include foundation-typography-base;
  @include foundation-typography-helpers;
  @include foundation-text-alignment;
  @include foundation-print-styles;
}

Compiling this into CSS will generate precisely nothing. You'll have a set of variables that you could use, and a set of mix-ins (functions, basically) you could call, but until you do so you won't generate any CSS. So the next thing you could do is comment back in this line:

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

However, you'll still get nothing, because all this does is to set default values for your variables (so setting fonts, colours, spacings, etc). What you need to do is to create a new SCSS file (let's call it test.scss) to start something like this:

@import 'foundation';

@include foundation-global-styles;
@include foundation-xy-grid-classes;

The first line includes the file which references all of the other SCSS files.

You can get a list of possible things to include at the Zurb site here. What this is doing is running a series of mix-ins. Here's the beginning of the one called "foundation-global-styles", for example, which you can find in the global.scss file:

@mixin foundation-global-styles {
  @include -zf-normalize;

  // These styles are applied to a  tag, which is read by the Foundation JavaScript
  .foundation-mq {
    font-family: '#{-zf-bp-serialize($breakpoints)}';
  }

It's these mix-ins which generate the CSS. All of this was probably obvious to everyone else, but it wasn't to me!