1

I'm having this issue where I can't seem to override the background color of the body element in my Neat Bourbon website.

I defined the background color like this in the _layout.scss file:

body {
background: lighten($brokenwhite, 5);
}

but when I check the element in Chrome Devtools, the background color of the body element is still defined as 'white'.

So where can I define the background color of the body element?

My source repository is available here.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Toontje
  • 1,415
  • 4
  • 25
  • 43
  • Have you tried, `background: lighten($brokenwhite, 5) !important;`? – Josh Powell Jan 29 '14 at 15:30
  • I don't see a background line in your main.css, but then there's ton of other css files. Set up a JSFiddle with the relevant example so that we can provide better advice. – Victoria Ruiz Jan 29 '14 at 15:33
  • @Hashem Qolami: I added the !important rule, but when I check in Chrome devtools, the background-color attribute for the body element is now: white !important; – Toontje Jan 29 '14 at 15:44
  • @Toontje Actually I didn't ask to do that :) BTW, I'm curious to know the value of `$brokenwhite`? – Hashem Qolami Jan 29 '14 at 15:46
  • I believe the "background" field is for setting the background as an image file, have you tried using "background-color:"? – rickkr Jan 29 '14 at 15:40

2 Answers2

2

I guess that $brokenwhite color is so bright, hence SASS compiler returns white as the result.

For instance:

$brokenwhite: #eee;

body {
  background: lighten($brokenwhite, 10);
}

The result would be:

body {
  background: white;
}

You could use SassMeister online tool to compile the above example.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • **FYI:** The actual color is [`#f8f9fc`](https://github.com/acandael/colloquium/blob/master/stylesheets/base/_colors.scss), So `lighten(#f8f9fc, 5)` would be `white`. – Hashem Qolami Jan 29 '14 at 16:15
0

I think your SASS is just not compiling, Have try changing it to this maybe .

body {
background: lighten($brokenwhite, 5%);
}

Just added the '%' after the 5. Also make sure that $brokenwhite is a defined variable.

Maybe save what ever sass file this _layout.scss is being imported to just in case ( although it should do this automatically )

Hope this helps.

aastrong
  • 1
  • 1