Menu icon Foundation
Proper Place For Styles In Foundation Apps

Hello,

I am just getting started with Apps and SASS so excuse this question if it is a simple SASS mistake, in the docs it says to change _settings.scss by uncommenting a selected style. If I want to add custom styles wouldn't app.scss be the best place for them? That is where I was putting them when using F5.

For some reason when I make a change in app.scss it doesn't appear. Do I need to run a cli command each time?

Example of my app.scss file

@import "settings";
@import "foundation";

h1 {
    color:green;
}
p {
	color:red;
}	
            

         

C1apture

stylesappSass

Hello,

I am just getting started with Apps and SASS so excuse this question if it is a simple SASS mistake, in the docs it says to change _settings.scss by uncommenting a selected style. If I want to add custom styles wouldn't app.scss be the best place for them? That is where I was putting them when using F5.

For some reason when I make a change in app.scss it doesn't appear. Do I need to run a cli command each time?

Example of my app.scss file

@import "settings";
@import "foundation";

h1 {
    color:green;
}
p {
	color:red;
}	
            

         

C1apture
Rafi Benkual almost 5 years ago

That's right, app.scss is is the place for your customizations. I usually add them at the bottom to avoid cascading issues.

http://foundation.zurb.com/docs/sass-files.html

ayezee almost 5 years ago

Thanks @Rafi,

yeah I knew that is what F5 suggested. I left it alone for a while and came back and when I refreshed it, it works. I noticed the more changes I make (and refresh) the longer it takes to see the changes. No biggie but I am all sorted out. Could be my computer though

Thanks,

Jennifer Eberlei almost 5 years ago

I absolutely recommend an organized folder structure. It is easier to maintain and you'll find all your modules easily.

I use this one:

  • base
    • base
    • layout
    • icons
    • mobile (only the @media rules and then import the modul-mobile
  • config
    • functions
    • mixin-(name)
    • colors
    • variables
  • modules
    • module-a
      • module-a
      • module-a--mobile
    • modul-b
    • module-b
    • module-b--mobile

etc

It's also recommended to take a look into BEM at this point:

http://bem.info