Menu icon Foundation
Force a Background Color Change in sass

I am trying to contain all of my sass edits into one file in /src/assets/sass/ called delta.scss. 

It's working out great. I pull on all of Zurb's existing sass and customize what I need for specific email templates. The only real issue is background color. In _template.scss, Line 7 is this bugaboo:

// Body Styles 
body, html, .body {
  background: #f3f3f3 !important;
}

 

I need a different background color.

I have tried different ways to get the background to change and they are mostly successful, but there's still a stripe of off-white across the bottom of an email I can't fix with sass.

Is there a sass trick I can use to force the background to another color and still leave all my customization in one sass file?

This is how I have /src/assets/scss/app.scss configured:

//@import 'settings';
@import 'foundation-emails';

@import 'template/template';
@import 'delta';

scsscssemail

I am trying to contain all of my sass edits into one file in /src/assets/sass/ called delta.scss. 

It's working out great. I pull on all of Zurb's existing sass and customize what I need for specific email templates. The only real issue is background color. In _template.scss, Line 7 is this bugaboo:

// Body Styles 
body, html, .body {
  background: #f3f3f3 !important;
}

 

I need a different background color.

I have tried different ways to get the background to change and they are mostly successful, but there's still a stripe of off-white across the bottom of an email I can't fix with sass.

Is there a sass trick I can use to force the background to another color and still leave all my customization in one sass file?

This is how I have /src/assets/scss/app.scss configured:

//@import 'settings';
@import 'foundation-emails';

@import 'template/template';
@import 'delta';
Rafi Benkual over 2 years ago

I've seen this before by targeting the html tag. Can you try without it? Jus t body, .body

Wally Glenn over 2 years ago

I figured out the answer.

To use one sass file and have multiple custom emails in the same install, I created classes in my sass file.

.alpha {}
.beta {}
.charlie {}
.delta {}

To apply the custom settings, I add the class name to the body tag:

<body class="delta">

The class influences everything that comes after the body tag, but not the original <html> tag, which was still using the default color of #f3f3f3.

So in my sass file, I added one more modification:

.alpha {}
.beta {}
.charlie {}
.delta {}

//  Global SASS
//  ------------------------------

body, html, .body {
    background: #ffffff !important;
}

Problem solved.

I added a few more default values to override the existing choice for fonts, colors and other values.

Corey Schaaf over 2 years ago

FYI - sometimes background as style is not honored in Outlook clients.  

bgcolor="" on the table, tr or td is the most bullet proof way of adding background colors.  However - that would mean you would not be able to control the bgcolor via styles and media queries.  Just wanted to make sure you were aware of that in some instances of outlook.