Menu icon Foundation
Sass - Dependent Components?

I'm starting to work on my first full-size project using Foundation. As such, I'm in the process of figuring out how to best organize my code, mainly Sass.

Instead of using "foundation-everything()", I'd like to create a separate import for each component which would feature, in order:

- Any related variable settings
- Initialization mixin (for example: foundation-accordion)
- Any additional Sass to customize the component.

Are there any interdependencies among the components that I need to take into account with this approach?

Thanks

Sassorganizationcomponents

I'm starting to work on my first full-size project using Foundation. As such, I'm in the process of figuring out how to best organize my code, mainly Sass.

Instead of using "foundation-everything()", I'd like to create a separate import for each component which would feature, in order:

- Any related variable settings
- Initialization mixin (for example: foundation-accordion)
- Any additional Sass to customize the component.

Are there any interdependencies among the components that I need to take into account with this approach?

Thanks

Rafi Benkual over 1 year ago

Sounds like a good plan! Luckily we do that here at ZURB as well. You can, in the app.scss file, comment out any of the includes. Most if not all the components are modular so they don't depend on each other. The only one to worry about is button-group depends on button. Otherwise you're good!

Christian Magill over 1 year ago

Awesome! Thanks.

Christian Magill over 1 year ago

Unfortunately this doesn't seem to quite work the way I'd hoped since the main Foundation import which happens first initializes all the variable values. This means that any cascading variable values that I set in my component file, for instance $topbar-background, aren't reflected in variables such as $topbar-submenu-background unless I explicitly set it as well.

Any suggestions on how to handle this?

I'd really hoped to have one scss file dedicated to each component to make things easy.

 

Thanks,

James Stone over 1 year ago

You have to think about the sequencing in which you are calling the mixins. For presentational classes, your scss / sass variables must be set prior to running the mixin.

You can say later on, set a variable:

$primary-color: #f00;

button { @include button; }

Just pay attention to the order in which you are going through the file. It reads top to bottom, starting at app.scss and then nesting in as many level deep, but still top to bottom.

In my opinion, you aren't going to gain much by doing this. I usually just make a copy of the _settings.scss file and any uncommented variables that I change for the project I do there. Then I import the foundation components one at a time. Often I end up with a scss file called something like _foundation-overrides.scss for things that I need to change globally, that can't be handed by the sass variables. This has to come after the foundation imports / includes. Then I have my own components, which might be built by scratch, or on top of a ZF component. I usually leave the variables (assuming they are component specific) in those specific files.

This way it is very easy for me to upgrade to new versions and determine which variable names have changed if any. I try and be reductive and only show the the variables that I am for sure changing, in the duplication of _settings.scss. I usually call it something like _some-project-variables.scss.

The only other thing that I might do is have a single file _some-project-brand-colors.scss that I will place first. Here I have named color variables (often generated out of something like zeplin.io) and then I set things like $primary-color to these.

Christian Magill over 1 year ago

Thanks for the reply,

I was getting tripped up by the defaults being set before the mixins were called. Unfortunately, this means you can not easily combine related variables and css to customize a Foundation component in one file.

This leaves you with a few options as I see it.

You can separate your variables from the output sass, splitting them into separate files, and loading the variable files before importing Foundation.

You can compbine all the variables into one settings file as you mentioned.

Or you can continue to combine the variables and output related sass in one file, but wrap the output related sass in a conditionally that is set after Foundation is imported, thus the files would be imported/compiled twice which probably has a negative performance effect, but may be negligible.