Menu icon Foundation
Problem creating color palette

According to the 6.2 docs, one can define a color palette, a step towards making a site "themable"(http://foundation.zurb.com/sites/docs/global.html#colors).

As a test, I proceeded to create a test project using the foundation CLI with the "basic" template setting. In the _settings.scss file, I modified the palette attributes as in the 6.2 docs. I then tried to build my test site using Gulp but failed with the error:

Error in plugin 'sass'
Message:
scss/_settings.scss
Error: Invalid CSS after "$light-gray": expected 1 selector or at-rule, was ": #e6e6e6;"
on line 57 of scss/_settings.scss
>> $light-gray: #e6e6e6;
^

Can someone tell me what I am doing wrong? Thanks

$foundation-palette: (
  primary: #E44347,
  mars: #D7525C,
  saturn: #E4B884,
  neptune: #5147D7,
)
            

         

Error in plugin 'sass'
Message:
    scss/_settings.scss
Error: Invalid CSS after "$light-gray": expected 1 selector or at-rule, was ": #e6e6e6;"
        on line 57 of scss/_settings.scss
>> $light-gray: #e6e6e6;
   ^
            

         

PaletteSass

According to the 6.2 docs, one can define a color palette, a step towards making a site "themable"(http://foundation.zurb.com/sites/docs/global.html#colors).

As a test, I proceeded to create a test project using the foundation CLI with the "basic" template setting. In the _settings.scss file, I modified the palette attributes as in the 6.2 docs. I then tried to build my test site using Gulp but failed with the error:

Error in plugin 'sass'
Message:
scss/_settings.scss
Error: Invalid CSS after "$light-gray": expected 1 selector or at-rule, was ": #e6e6e6;"
on line 57 of scss/_settings.scss
>> $light-gray: #e6e6e6;
^

Can someone tell me what I am doing wrong? Thanks

$foundation-palette: (
  primary: #E44347,
  mars: #D7525C,
  saturn: #E4B884,
  neptune: #5147D7,
)
            

         

Error in plugin 'sass'
Message:
    scss/_settings.scss
Error: Invalid CSS after "$light-gray": expected 1 selector or at-rule, was ": #e6e6e6;"
        on line 57 of scss/_settings.scss
>> $light-gray: #e6e6e6;
   ^
            

         
Remco Janssen over 3 years ago

EDIT: you need to add ';' to the end of your statement:

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
primary: #F0AD27,
secondary: #A6A497,
success: #F37809,
warning: #F26107,
alert: #0C0C0B,
); <------------------------------------------------------SEE YOU FORGOT THIS ONE
$light-gray: #e6e6e6;
$medium-gray: #cacaca;

I am not sure but I believe you need to use the primary, secondary, error, success and allert

if you ommit one, it won't work

Sharriff over 3 years ago

Thanks for looking into this issue @Remco Janssen . The missing semi-colon does not change the output. It still fails with an error. I just pasted a quick copy in my post. It was not missing in my real code.

It could be that I have to retain the primary, secondary, error and alert classes. But the docs suggest in the case of the palette otherwise. My code is directly lifted off the docs page.

Remco Janssen over 3 years ago

Can you share a larger bit of your code?

This is what I get when I leave out the ';'

Error: Invalid CSS after "$light-gray": expected selector or at-rule, was ": #e6e6e6;"
on line 58 of /scss/_settings.scss
from line 3 of /scss/app.scss
Use --trace for backtrace.

Rafi Benkual over 3 years ago

I am seeing the same thing as @Remco Janssen
The default settings file https://github.com/zurb/foundation-sites/blob/develop/scss/settings/_settings.scss#L51 shows you need the closing ;

Also, there is an include below the global that is needed

@include add-foundation-colors;

It comes in the settings file already. You might try restarting the server.

Sharriff over 3 years ago

Please try the example in the docs with a semi colon. It does not make a difference, still does not work. I mentioned that the missing semi colon was a copy/paste error on my part for the use of this posting

Sharriff over 3 years ago

Here is my global section:

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
  primary: #E44347,
  mars: #D7525C,
  saturn: #E4B884,
  neptune: #5147D7,
);
$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;
Error in plugin 'sass'
Message:
    scss/_settings.scss
Error: Undefined variable: "$success-color".
        on line 391 of scss/_settings.scss
>> $meter-fill-good: $success-color;
   ------------------^

Why would I need to restart my server @Rafi Benkual ? I am getting this error by running the Gulp "sass" task.

Remco Janssen over 3 years ago

The error you get now says it's missing the 'success-color' variable. So I think you need to add those to the palette, try changing it to:

$foundation-palette: (
  primary: #F0AD27,
  secondary: #E44347,
  success: #F37809,
  warning: #F26107,
  alert: #0C0C0B,
 mars: #D7525C,
  saturn: #E4B884,
  neptune: #5147D7,
);

Sharriff over 3 years ago

It works now, thanks @Remco Janssen . This must be reflected in the docs. Should I file an issue at the foundation-cli github project?

Rafi Benkual over 3 years ago

You can file it here: https://github.com/zurb/foundation-sites/issues We'd like to look into it!