Menu icon Foundation
Questions about project structure and SASS

I am a first time Foundation user beginning with Foundation 5 using SASS with Compass. I used the gem install and have created my project, but I have some questions about the directory structure. I've previously used Bootstrap and LESS, please forgive the newbie questions.

In '/scss/app.scss' it says
@import "settings";
@Import "foundation";

I am wondering which settings file the @import is referring to. Is it '/scss/_settings.scss' or '/bower_components/foundation/scss/foundation/_settings.scss'? What is the difference between those settings files, as their contents appear to be the same. Do I need both files? The settings in each file are commented out, are any of these applied or do they exist in other files?

What is the difference between _settings.scss and _globals.scss

I thought the @import refers to files prefixed with _, e.g., _settings.scss, but foundation.scss in '/bower_components/foundation/scss/foundation/_settings.scss' doesn't have an _ prefix. I expected it to be _foundation.scss.

The same goes for normalize.scss; it doesn't have an _ prefix and isn't imported in the foundation.scss @import. Should normalize.scss be imported in app.scss, e.g.,

@import "settings";
@import "normalize";
@Import "foundation";

If I want to customize Foundation, is it best to modify an existing file(s) or create one containing all of my customizations? If the latter, in what folder should I create the file and how should I @import it?

Thanks,
Nathan

Sassprojectsetup

I am a first time Foundation user beginning with Foundation 5 using SASS with Compass. I used the gem install and have created my project, but I have some questions about the directory structure. I've previously used Bootstrap and LESS, please forgive the newbie questions.

In '/scss/app.scss' it says
@import "settings";
@Import "foundation";

I am wondering which settings file the @import is referring to. Is it '/scss/_settings.scss' or '/bower_components/foundation/scss/foundation/_settings.scss'? What is the difference between those settings files, as their contents appear to be the same. Do I need both files? The settings in each file are commented out, are any of these applied or do they exist in other files?

What is the difference between _settings.scss and _globals.scss

I thought the @import refers to files prefixed with _, e.g., _settings.scss, but foundation.scss in '/bower_components/foundation/scss/foundation/_settings.scss' doesn't have an _ prefix. I expected it to be _foundation.scss.

The same goes for normalize.scss; it doesn't have an _ prefix and isn't imported in the foundation.scss @import. Should normalize.scss be imported in app.scss, e.g.,

@import "settings";
@import "normalize";
@Import "foundation";

If I want to customize Foundation, is it best to modify an existing file(s) or create one containing all of my customizations? If the latter, in what folder should I create the file and how should I @import it?

Thanks,
Nathan

Mihai Stroe almost 6 years ago

Don't modify anything in bower_components because everything in that dir will be overwritten if you ever update foundation.

 @import "settings";

imports _settings.scss in /scss which is the one you should modify. The one in bower_components is the same file; both have all lines commented out by default.

 @import "foundation";

imports all the scss for all the Foundation components. If you don't need all of that you can go ahead and comment that line out, then add an import for each individual component you wish to use.

Any custom code you add can be either in app.scss, create new scss files, or create new partials which you will @import in app.scss. It's up to you how you want to do it.

A few related topics that should further help you:

http://foundation.zurb.com/forum/posts/277-custom-css-with-sass

http://foundation.zurb.com/forum/posts/718-what-to-do-after-installing-foundation-with-sass

http://foundation.zurb.com/forum/posts/771-how-to-customize-foundation-with-sass

Thomas Hoadley almost 6 years ago

Hi Nathan, that is the exact same issue that has stumped me. I can't quite get my head around the different import paths within the project! Do you have a twitter account, I would like to keep up to date on your progress because I am also just starting out with foundation 5.

Mihai, could you please explain the import path for :

@import "foundation";

that is found within the app.scss ?

I am looking to create a partials folder within the 'scss' folder but what import path would I use in app.scss? Would it be something like:

@import "partials/_grid";

If not, how?!

Any help is greatly appreciated!

Mihai Stroe almost 6 years ago

 @import "foundation";

essentially imports

bower_components/foundation/scss/foundation/foundation.scss

which, if you'll inspect, has imports for all of the component partials that come with Foundation. As I mentioned above, if you're not going to use all of the Foundation components then you can delete that line and instead do individual imports for the things you need. That way you can also improve load times.

@Thomas, you are correct. Any partials you add will have a relative path to app.scss, just keep in mind that with a partial you wouldn't need to include the beginning underscore.

// no underscore, no .scss extension
@import "partials/grid";

Again, don't modify anything inside of bower_components but if you find any css in the default files you want to override feel free to copy it over in your custom partials and change it up there.

Nathan Cooper almost 6 years ago

Mihai,
Thanks for your help and links to related documentation.

Thomas,
I don't have a personal Twitter, just one for my game dev business @possiblewhale. I use Google+ frequently (one of the few). If you would like to stay in touch, please follow me there https://plus.google.com/u/0/114789015317726309211