Menu icon Foundation
Header Sizes SASS Error

Hey all! I was wondering if anybody else experienced this error - I'm currently running the npm version of Foundation 6, and when I "npm start" to compile the SASS, it gives me this in the command prompt:

Message:
    bower_components\foundation-sites\scss\typography\_base.scss
Error (small: ("h1": 24, "h2": 20, "h3": 19, "h4": 18, "h5": 17, "h6": 16),
medium: ("h1": 48, "h2": 40, "h3": 31, "h4": 25, "h5": 20, "h6": 16)) isn't a valid CSS value.
    on line 44 of bower_components/foundation-sites/scss/typography/_base.scss
>>  small: (
    --^

         

It's telling me that small: is not a proper CSS value. Since this is a part of the Foundation 6 template, I'm a bit lost on why it would be popping up. Here's the SCSS in question:

$header-sizes: (
    small: (
		'h1': 24,
		'h2': 20,
		'h3': 19,
		'h4': 18,
	),
	medium: (
		'h1': 48,
		'h2': 40,
		'h3': 31,
		'h4': 25,
	),
);
            

         

foundation 6header sizes

Hey all! I was wondering if anybody else experienced this error - I'm currently running the npm version of Foundation 6, and when I "npm start" to compile the SASS, it gives me this in the command prompt:

Message:
    bower_components\foundation-sites\scss\typography\_base.scss
Error (small: ("h1": 24, "h2": 20, "h3": 19, "h4": 18, "h5": 17, "h6": 16),
medium: ("h1": 48, "h2": 40, "h3": 31, "h4": 25, "h5": 20, "h6": 16)) isn't a valid CSS value.
    on line 44 of bower_components/foundation-sites/scss/typography/_base.scss
>>  small: (
    --^

         

It's telling me that small: is not a proper CSS value. Since this is a part of the Foundation 6 template, I'm a bit lost on why it would be popping up. Here's the SCSS in question:

$header-sizes: (
    small: (
		'h1': 24,
		'h2': 20,
		'h3': 19,
		'h4': 18,
	),
	medium: (
		'h1': 48,
		'h2': 40,
		'h3': 31,
		'h4': 25,
	),
);
            

         
Tim Hartwick over 3 years ago

Thanks for pointing this out. Which foundation-6 template did you start with?

https://github.com/zurb/foundation-zurb-template
or
https://github.com/zurb/foundation-sites-template

We're not seeing that on our end. Can you walk through the steps again to recreate this error?

Jason Hankins over 3 years ago

Hi guys,

I am having the same issue as Aron with the exception that it is the header sizes within the settings file causing the issue. I am working with jointswp which is using sites. http://jointswp.com/

I have made sure that I am using the latest and greatest _settings.scss file. I have tried compiling with both gulp-sass and compass and both are throwing this error. This seems to be the only block of sass that it stumbles over in the settings file. Commenting out the header sizes section causes it to then flag that bit of code within the /typography/_base.scss as Aron has stated.

I am primarily using node.js version 5.1.0 with gulp-sass version 2.1.0
but have also tried
Ruby version 2.1.7 with compass version 1.0.3