Menu icon Foundation
Best practice: work with /components partial variables

I'm trying to figure out how to best work with partials like _top-bar.scss . Editing _settings for variable changes is great, and adding a _custom partial that's imported at the end of the compiling process works fine. But for some edits I would want to work directly in the _top-bar file itself so that I could use the variables, except that I know it will be overwritten during foundation updates (foundation is in bower_components in my project). Here's an example of what I mean:

To add an h4 element into .top-bar .name h4 { } that does what the h1 does that's already there, I could:
1. add .top-bar .name h4 { without variables } in _custom.
or
2. add .top-bar .name h4 { with variables } in _settings below the variables, and uncomment all variables that are used.

1. Is quick, but I don't take advantage of variable use, and all the edits get appended to the app.css (seems more likely to bloat / duplicate).
2. Just seems like a wonky way to go!

So, I'm sure I'm missing some obvious way others are working this in order to still use variables in custom css additions. I appreciate the help.

scsscomponents

I'm trying to figure out how to best work with partials like _top-bar.scss . Editing _settings for variable changes is great, and adding a _custom partial that's imported at the end of the compiling process works fine. But for some edits I would want to work directly in the _top-bar file itself so that I could use the variables, except that I know it will be overwritten during foundation updates (foundation is in bower_components in my project). Here's an example of what I mean:

To add an h4 element into .top-bar .name h4 { } that does what the h1 does that's already there, I could:
1. add .top-bar .name h4 { without variables } in _custom.
or
2. add .top-bar .name h4 { with variables } in _settings below the variables, and uncomment all variables that are used.

1. Is quick, but I don't take advantage of variable use, and all the edits get appended to the app.css (seems more likely to bloat / duplicate).
2. Just seems like a wonky way to go!

So, I'm sure I'm missing some obvious way others are working this in order to still use variables in custom css additions. I appreciate the help.

Karl Ward over 5 years ago

I couldnt quite work out your examples, but I dont see any reason why you would need to edit _top-bar.scss directly. The same variables that are available in that file, are also available in _settings.scss, although they are commented out by default.

I only use edit _settings.scss i Foundation, and then I import my own partials after, which may extend Foundation and can use the same variables.