Menu icon Foundation

Designer | Los Angeles

My Posts



My Comments

John Culpepper commented on John Culpepper's post over 4 years

Perfect - Thanks Rafi.

We are slowly developing a Foundation version of our website and right now we have different tabs (colored) for things like Product Description, Technical Specifications, Tips etc. Allowing those colors to continue will help our customers when we convert.

I appreciate your help.

jc

John Culpepper commented on John Culpepper's post over 4 years

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

John Culpepper commented on John Culpepper's post over 4 years

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.

John Culpepper commented on John Culpepper's post over 4 years

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";

Posts Followed


Following

    No Content

Followers

My Posts


My Comments

You commented on John Culpepper's post over 4 years

Perfect - Thanks Rafi.

We are slowly developing a Foundation version of our website and right now we have different tabs (colored) for things like Product Description, Technical Specifications, Tips etc. Allowing those colors to continue will help our customers when we convert.

I appreciate your help.

jc

You commented on John Culpepper's post over 4 years

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

You commented on John Culpepper's post over 4 years

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.

You commented on John Culpepper's post over 4 years

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";

Posts Followed

Following

  • No Content

Followers

  • No Content