Foundation custom Integration and settings override

We are upgrading from foundation5 to version 6.6.3 in our open-source repository. I got stuck a little with the implementation and I hope somebody can give us a hint on why our implementation does not work as expected.
Our integration uses the libsass compiler (fyi). I started off doing the implementation using the foundation-cli zurb template with app.scss as the main scss file. What we intend to create during the compile step of our custom app.scss:

  1. Load the inital settings/_settings.scss
  2. Inject some variables like $body-font-family-ui or $primary-color-ui.
  3. load our foundation-mods.scss that uses the latter to create the $foundation-palette.
  4. Import the some fonts and finally foundation.scss.
  5. Import all post imports defined in our application.

Problem: the $foundation-palette remains the default one and the custom one in foundation-mods is ignored for buttons, labels, links etc.:

// foundation-mods.scss
$foundation-palette: (
  primary: $primary-color-ui,
  secondary: $gray,
  success: $green-dark,
  warning: $orange-dark,
  alert: $red-dark,
  info: $blue-dark
);

Edit: The problem is once a variable has been accessd, it can’t be changed anymore.

By adding the following to such a foundation-mods.scss solves most except the link colors:

$badge-palette: $foundation-palette;
$button-palette: $foundation-palette;
$label-palette: $foundation-palette;

Our custom app.scss looks like this:

@charset "utf-8";
$primary-color: null;
$secondary-color: null;
$success-color: null;
$warning-color: null;
$alert-color: null;
$-zf-size: null;
$-zf-bp-value: null;
@import 'settings/_settings';

// injected variables
$primary-color-ui: #cb253e;
$body-font-family-ui: "Merriweather", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
$header-font-family-ui: "Roboto Condensed", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
$footer-height: 260px;

@import 'foundation-mods';
@import 'Merriweather';
@import 'LatoLatinWeb';
@import 'Roboto Condensed';
@import 'Roboto';
@import 'Open Sans';
@include add-foundation-colors;
@import 'foundation';

// import post imports
@import 'custom_mixins';
@import 'typography';    

$flex: true;
$prototype: false;
$xy-grid: $xy-grid;

@if $flex {
  $global-flexbox: true !global;
}
@if $xy-grid {
  $xy-grid: true !global;
}
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

@if not $flex {
  @include foundation-grid;
}
@else {
  @if $xy-grid {
    @include foundation-xy-grid-classes;
  }
  @else {
    @include foundation-flex-grid;
  }
}

@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-table;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

@include foundation-float-classes;
@if $flex { @include foundation-flex-classes; }
@include foundation-visibility-classes;
@if $prototype { @include foundation-prototype-classes; }

Custom or changed settings should come before loading our settings and the other files. Otherwise the Sass compiler will not pick up your changed settings.

Actually, all there was to do is not taking the _settings and let initialize the lacking variables by _global.scss. I got that now and just wanted to delete this post. Thansk for replying so quickly given that you are kind of the last person who cares about the foundation-project actively. Really wonder how that came.

@pony_m can you post a snippet of the code you fixed to make that work?

@nic I can post the final scss that is compiled by our application in several steps. In the integration of the Theme in our application, the theme is created with the function compile, see onegov-cloud/theme.py at d3754e911ad61e54f23682bc977cd306c8185667 · OneGov/onegov-cloud · GitHub. Here is the output of that compile function after all steps are added.

@charset "utf-8";
// Initialize some variables
$primary-color: null;
$secondary-color: null;
$success-color: null;
$warning-color: null;
$alert-color: null;
$-zf-size: null;
$-zf-bp-value: null;

// Custom theme options injected by options in `compile(options)`
$tile-image-1: "../static/homepage-images/tile-1-small.jpg";
$tile-image-2: "../static/homepage-images/tile-2-small.jpg";
$tile-image-3: "../static/homepage-images/tile-3-small.jpg";
$tile-image-4: "../static/homepage-images/tile-4-small.jpg";
$tile-image-5: "../static/homepage-images/tile-5-small.jpg";
$tile-image-6: "../static/homepage-images/tile-6-small.jpg";
$primary-color-ui: #006fba;
$body-font-family-ui: Merriweather, sans-serif !default;
$header-font-family-ui: "Roboto Condensed", sans-serif !default;
$footer-height: 285px;
$primary-color: #006fba;

// Pre-Imports
@import 'foundation-mods';
@import 'Open Sans';

@include add-foundation-colors;
@import 'foundation';

// Post-Imports
@import 'custom_mixins';

// further foundation options
$flex: true;
$prototype: false;
$xy-grid: $xy-grid;

@if $flex {
  $global-flexbox: true !global;
}
@if $xy-grid {
  $xy-grid: true !global;
}
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

@if not $flex {
  @include foundation-grid;
}
@else {
  @if $xy-grid {
    @include foundation-xy-grid-classes;
  }
  @else {
    @include foundation-flex-grid;
  }
}

@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-table;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

@include foundation-float-classes;
@if $flex { @include foundation-flex-classes; }
@include foundation-visibility-classes;
@if $prototype { @include foundation-prototype-classes; }

We copied the files from the node_module directory as explained in the Readme (the cli is not exactly correct anymore, but gives you a hint how to copy the files from node_modules). Otherwise just compare the files present there in the foundation6 module.