Menu icon Foundation
Edits to App.scss and Settings.scss

Total newbie question for Foundation folks. The end game is to understand the rules for editing app.scss & settings.scss.

Background - I'm using Codekit so I don't need to worry about compiling my CSS. I'm also new to Foundation and SCSS if that helps.

OK, I was making changes to settings.scss and those changes were not making it to my test site. For example, I changed the default font color of Headings from $jet to $primary-color. I found if I manually put that change in the app.scss the change would reflect on my site but I did it in traditional CSS format:
h1, h2, h3, h4, h5, h6 {
color: $primary-color;
}

Is this what one is suppose to do; comment out the line in settings and add changes in to app.scss?

app.scsssettings.scssrem

Total newbie question for Foundation folks. The end game is to understand the rules for editing app.scss & settings.scss.

Background - I'm using Codekit so I don't need to worry about compiling my CSS. I'm also new to Foundation and SCSS if that helps.

OK, I was making changes to settings.scss and those changes were not making it to my test site. For example, I changed the default font color of Headings from $jet to $primary-color. I found if I manually put that change in the app.scss the change would reflect on my site but I did it in traditional CSS format:
h1, h2, h3, h4, h5, h6 {
color: $primary-color;
}

Is this what one is suppose to do; comment out the line in settings and add changes in to app.scss?

Rafi Benkual over 4 years ago

app.scss is pre-compiles SCSS/CSS

I don't know if you are using compass or Libsass

but the app.css file included in the stylesheets folder (compass) and CSS (Libsass) is where the compiled CSS gets to.

If there is a setting to change, uncomment the setting, and change the value, save. Custom variables, Sass,SCSS,CSS go in app.scss

John Culpepper over 4 years ago

Using Compass. I have found if I make a change directly in settings (e.g. Font Size) it has no impact. So I have put those changes in the app.scss file. Perfect example is the H1 color. The settings.scss has this as follows: $header-font-color: $jet. I changed that to $primary-color and it didn't make any difference in my site. The compiled CSS still used jet ( #222222 ).

So to work around this, I put the following in my app.scss:

h1, h2, h3, h4, h5, h6 {
color: $primary-color;
}

This changed the CSS but I'm not sure if this is how it's supposed to be done or if it's a case that my Compass is compiling incorrectly due to a setting, and I shouldn't have to do these individual tweaks in app.scss.

Any clarity on where the custom change is to be made would be helpful. Furthermore, if I should be able to make changes directly in settings, where should I look to the problem? I'm importing settings at the top of app.scss. @import "settings";

Rafi Benkual over 4 years ago

Are you importing foundation and setting in the app.scss file?

John Culpepper over 4 years ago

Yes, Doing that. Not sure why my follow-up note isn't showing on this call but if I remember correctly I wrote that I had the order reversed and it seemed to make a difference. I'm now able to make changes in app.scss and everything works. Evidently the order of operations for importing is key. That makes sense once I think about it but it was the issue.

By the way, is there any reason why app.scss can't be renamed to style.scss?

Thanks for your help.

Rafi Benkual over 4 years ago

Cool, glad you got it. Sass is a declarative language so that means it goes line by line through your code to compile. If you have something defined after it is is called, that would cause an error.

Yes, you can rename app.scss. We use it because it's an industry standard.

John Culpepper over 4 years ago

Thank. Didn't know app.scss was industry standard. Learn something new every day.