Menu icon Foundation
Zurb and Yeoman zf5 generator

Hi everyone,

I'm fairly new to Foundation but I've already started digging into Yeoman since this should be the next best thing.

I'm having trouble grasping where to put my sass.

In the app\scss folder, I have three .scss-files:
- _appstyles.scss where I'm currently writing my custom sass
- _settings.scss which is all commented out
- app.scss which imports all Foundation components

I noticed my _appstyles.scss gets compiled into app.css, along with all the Foundation components.

My question is, what do you put where? How does it work together?
Where would you guys add your customs scss? Would you keep your mixins seperated?

All information is highly appreciated :-)

Thanks,
Bart

zf5generatoryeomanFoundationhelp

Hi everyone,

I'm fairly new to Foundation but I've already started digging into Yeoman since this should be the next best thing.

I'm having trouble grasping where to put my sass.

In the app\scss folder, I have three .scss-files:
- _appstyles.scss where I'm currently writing my custom sass
- _settings.scss which is all commented out
- app.scss which imports all Foundation components

I noticed my _appstyles.scss gets compiled into app.css, along with all the Foundation components.

My question is, what do you put where? How does it work together?
Where would you guys add your customs scss? Would you keep your mixins seperated?

All information is highly appreciated :-)

Thanks,
Bart

Rafi Benkual over 4 years ago

Sounds like you have it right. If _appstyles.scss is compiled into app.css then you just link app.css in your head.

If you add custom Sass partials, you import them in _app.scss. I think its better to keep your mixins separate as it's easier to find them. Make sure you import them before your Sass partials that use the mixins.

Julian Ćwirko over 4 years ago

Hi, this could be helpful: http://julian.io/foundation-5-and-yeoman/

Prathap over 4 years ago

@Bart

It's a good practice to separate .scss & sass files from .css files.

   "css/sass/app.scss, app.sass"
   "css/app.css (compiled scss file)