Menu icon Foundation
Modularize Settings?

I'd like to split the setting variables up so I can have a few global settings in the "_settings.scss" file but put the more the specific settings such as "$header-font-family" to the top of my of the appropriate file, such as "_base.headings.scss" file.

When I import my custom settings at the bottom of the app.scss file my variables in the "_base.headings" file are ignored (though it does see the styles).

When I move the custom import right below the "settings" import the variables are recognized but the styles are overwritten by the foundation includes.

 

Any ideas on how to get around this?

Foundation 6.2

I'd like to split the setting variables up so I can have a few global settings in the "_settings.scss" file but put the more the specific settings such as "$header-font-family" to the top of my of the appropriate file, such as "_base.headings.scss" file.

When I import my custom settings at the bottom of the app.scss file my variables in the "_base.headings" file are ignored (though it does see the styles).

When I move the custom import right below the "settings" import the variables are recognized but the styles are overwritten by the foundation includes.

 

Any ideas on how to get around this?

Frank Wronson over 3 years ago

Hi Rafi,

 

Thanks for your help. The more I thought about it the more I realized I was just trying to force foundation to fit the structure that I wanted instead of sticking with what they had already developed. 

I was trying to rework the _settings file to only hold global variables and global maps (like font-size or color etc..) that could be reused throughout my project. I then wanted to move the existing foundation variables (and any custom variables) to the top of the related component files. 

In the past I've tried to use the INUITCSS structure (Settings, Tools, Objects etc...) to organize my files so foundations set-up was a slight change. And, to be honest that wall of variables just felt excessive all on one page :). 

Rafi Benkual over 3 years ago

Hey Frank - just trying to wrap my head around your goals here.

You are creating custom variables, and you'd like them to be imported so they can be used throught the framework. Is that right?

 

Typically I would add each custom variable in the component partials they relate to. I would then import the component below the foundation import. If any of my other custom components rely on a variable I've created, I make sure to import it after.

 

Does that answer your question?