Menu icon Foundation
Were are the SCSS files for SASS

Hello,

I'm new to using foundation with SASS. I finally got everything to work from this link http://foundation.zurb.com/docs/sass.html but now I'm I have no idea were I can find, edit, and or choose which .scss files to edit. When I run the steps in the link above I just see _settings.scss and an app.scss files. Should there be other .scss files for the certain modules if you will that foundation offers so that I can edit those values?

FoundationSassscss

Hello,

I'm new to using foundation with SASS. I finally got everything to work from this link http://foundation.zurb.com/docs/sass.html but now I'm I have no idea were I can find, edit, and or choose which .scss files to edit. When I run the steps in the link above I just see _settings.scss and an app.scss files. Should there be other .scss files for the certain modules if you will that foundation offers so that I can edit those values?

Karl Ward over 5 years ago

I am not 100% sure what structure you have there, but you should have a folder bower_components/foundation/scss/. Inside, there should be a file foundation.scss, which in turn imports all scss files in the foundation/ subfolder.

Rafi Benkual over 5 years ago

Hi Brian. You want to use _settings.scss for your changes. Just find the setting, uncomment, and make change like so http://prntscr.com/2l0vmq

Brian over 5 years ago

Hi Rafi Benkual,

Ok, I was under the assumption that I had to have a .scss file for every component that I wanted to use. I assumed that if I wanted to use the Orbit component that I had to download the .scss file for Orbit and make changes to that so it would apply the changes to the .css file. This is not needed then? I only need to modify one file such as the _settings.scss file then?

Rafi Benkual over 5 years ago

Right. Durring updates, the scss partials for all components can be updated. _setting.scss does not get changed therefor this is the file to use.

Brandon Arnold over 5 years ago

You never want to directly edit any of the component files, as they will be changed upon upgrade. The settings.scss file is great to change the way a lot of those things look and the rest can be done in your own scss files. The setting.scss file has a collection of variables we've used throughout foundation that helps change things like font-size and colors for various components.

Here's the file structure of a recent client project I've finished here at ZURB
https://www.dropbox.com/s/s4sehwwrqih3p2i/Screenshot%202014-02-27%2015.59.08.png

There's a similar article from the Sassway here
http://thesassway.com/beginner/how-to-structure-a-sass-project