19

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 believe the accepted answer is not the correct solution - as it includes all of the components and is actually the opposite of what Zurb suggests (see this issue: https://github.com/zurb/foundation-sites/issues/7537). Anyway...

I installed Foundation 6.1.1 from bower, and added the path to my gulp-sass function in gulpfile.js like so:

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/theme.scss')
        .pipe(sass({ includePaths : ['bower_components/foundation-sites/scss'], outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(gulp.dest('css/'))
});

My theme.scss is as follows:

//vendor file
@import '../bower_components/foundation-sites/scss/settings/settings';
@import '../bower_components/foundation-sites/scss/foundation';

body{
  background: red;
}

When compiling my scss I get no errors, but the output of theme.css looks like this:

/**
 * Foundation for Sites by ZURB
 * Version 6.1.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  background: red;
}

So it appears it is hitting the file since the comment is outputted but its not compiling any of the Sass imports in foundation.scss.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
erwstout
  • 1,277
  • 1
  • 13
  • 30
  • What version of Sass are you compiling with? Have you tried compiling it with Sass directly, rather than using a build tool? – cimmanon Dec 30 '15 at 21:23
  • `npm view node-sass version` gives me 3.4.2 and `npm view gulp-sass version` gives me 2.1.1 (latest) @cimmanon – erwstout Dec 30 '15 at 21:26

2 Answers2

40

This is happening because in Foundation 6 @import foundation only imports the Foundation mixins for use in your SCSS. It's setup this way so that you can use a component's Foundation mixins and not bloat your CSS by also adding the stock CSS classes for that component.

To import all of the Foundation CSS classes you can setup your main app.scss file (theme.scss in your case) similar to this:

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-everything;

@include motion-ui-transitions;
@include motion-ui-animations;

To import only the individual CSS classes for the components you need, setup your app.scss file (theme.scss in your case) like below, and comment out the components you don't use. 

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles; // Always include the global-styles
@include foundation-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;

@include motion-ui-transitions;
@include motion-ui-animations;

You will also want to copy the _settings.scss file from bower_components/foundation-sites/scss/settings/ and place it in your project's scss directory.

Finally, make sure you include these two paths in the sass task in your gulpfile.js:

  • bower_components/foundation-sites/scss
  • bower_components/motion-ui/src/
Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
  • So in this instance is `app.scss` actually my file, `theme.scss`? Currently in my project I do not have `app.scss` – erwstout Dec 31 '15 at 00:40
  • 1
    You are correct. I will update my answer to reflect this. I am also adding a part about the settings file I forgot. – Colin Marshall Dec 31 '15 at 00:50
  • Can you elaborate Colin? Do you mean that only getting the header and no CSS is normal from compile? How can I get all of the CSS? I can't find anything on the Foundation installation page. Right now all I have is `@import` for the main `scss/foundation.scss` file from `bower`. – Adam Thompson Dec 31 '15 at 07:49
  • 1
    @AdamThompson no that is not normal, you need to `@include foundation-everything` or `@include` the individual components after you `@import foundation` to get the Foundation CSS. Importing `foundation.scss` only imports the mixins so you can use Foundations components with your own custom CSS classes. – Colin Marshall Dec 31 '15 at 16:27
  • Awesome, this solved my issue. Thanks @ColinMarshall all up and running now. – erwstout Jan 04 '16 at 17:45
  • _settings has dependency on util/util. how to solve it? – Jaime Sangcap Mar 17 '16 at 09:41
  • 2
    @Daskul set your import paths, as mentioned in the very end of this answer. – Colin Marshall Apr 08 '16 at 22:35
  • You may also take a look at https://github.com/zurb/foundation-sites/blob/develop/meteor-README.md#3-overwrite-foundation-settings which describes how to modify the settings file in the recommended way. Btw you can remove as much as you want from that copied settings file, because all the variables are already defined in the modules. – RiZKiT Feb 02 '18 at 09:47
4

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 <meta> 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!

Andy Brown
  • 5,309
  • 4
  • 34
  • 39