Menu icon Foundation
Issue with Foundation Color Palette : $primary not defined

Hi Rafi & Gang, 

I've had this issue mulitple times as I like to run all my SCSS files in SASS and when I convert my _settings.scss file to _settings.sass I always get the error that my color palette is not defined.  I haven't found a way around it, so I always switch back to SCSS for the _settings.scss file.  

So I've switched back to the SCSS format, but I'm still getting the error  error scss/_settings.scss (Line 577: Undefined variable: "$primary".

Line 577 is where I call the $primary color to be used as my background color for topbar

$topbar-background: $primary;

My issue seems very similar to this post by Shariff, but I can't tell how he resolved his issue.  I have restarted my local server and SASS from the command line.    

 

Here's a look at my global declarations in _settings.scss

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-text-direction: ltr;
$global-flexbox: false;
$print-transparent-backgrounds: true;

@include add-foundation-colors;

 

PalettecolorsSassscss

Hi Rafi & Gang, 

I've had this issue mulitple times as I like to run all my SCSS files in SASS and when I convert my _settings.scss file to _settings.sass I always get the error that my color palette is not defined.  I haven't found a way around it, so I always switch back to SCSS for the _settings.scss file.  

So I've switched back to the SCSS format, but I'm still getting the error  error scss/_settings.scss (Line 577: Undefined variable: "$primary".

Line 577 is where I call the $primary color to be used as my background color for topbar

$topbar-background: $primary;

My issue seems very similar to this post by Shariff, but I can't tell how he resolved his issue.  I have restarted my local server and SASS from the command line.    

 

Here's a look at my global declarations in _settings.scss

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-text-direction: ltr;
$global-flexbox: false;
$print-transparent-backgrounds: true;

@include add-foundation-colors;

 

PeterEmil about 2 years ago

Hi Andrew, I was wondering that myself. But in theGlobal Files doc you can find this bit:

The line @include add-foundation-colors; in your settings file allows you to use the following Sass variables to reference default colors from the palette:
$primary-color
$secondary-color
$success-color
$warning-color
$alert-color

Andrew Sepic over 2 years ago

I'm doing a headspin @Kai Falkowksi.  I've replaced

$topbar-background: $primary;

with

$topbar-background: $primary-color;

 

And it works.  I didn't know you would have to suffix the variable name $primary  with -color. As the $foundation-palette variable does not include 'color' at the end of the variable names...

Is that in the docs somewhere that I missed?

Kai Falkowski over 2 years ago

Hi Andrew,

I think you only have to replace $primary with $primary-color