Override the default colors using SASS

Question

I am new to this "foundation" and trying to find hard to change the background color of HTML body.

I need someone to shed some light regarding usage of this.

I have downloaded foundation 5 latest version and included in my MVC project and here is the folder structure of it

enter image description here

And here is my sass folder structure:

enter image description here

Now each time when I run my website the default css applying is is foundation.css. So how do I override its background body color

I have done it like this in my Site.scss but the color is not applying.

/* Site.css is generated by the Sass precompiler */
/* Please make changes to Site.scss (SASS) since changes to Site.css (CSS) will be overwritten */
@import "normalize";
@import "foundation";
@import "foundation.mvc";

$color: #ccc;

.foo {
    background: $color ;
}

And finally this is my _Layout.cshtml:

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>@ViewBag.Title - Welcome to Foundation</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    @Styles.Render("~/Content/Foundation/css")

    @RenderSection("head", required: false)
    @Scripts.Render("~/bundles/modernizr")
</head>
<body class="foo">
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/foundation")
    <script>
        $(document).foundation();
    </script>
    @*Use the Scripts section to define page specific scripts*@
    @RenderSection("scripts", required: false)
</body>
</html>

score 0 · Answer 1 · answered May 31 '14 at 15:10

0

Try

.foo {
    background: $color !important;
}

If that doesn't work use F12 (or a similar browser tool) to see how the CSS is computed, and it should tell you what is overriding that value.

answered May 31 '14 at 15:10

DorkyMork

66
4

@DorkyMork- I have tried it before using !important but that didn't work and I used google inspector and firebug for firefox too but none helped me and I tried to remove all cookies and reloaded it but the result was same – coder May 31 '14 at 15:14
It could also be that the CSS is not being created at compile time, check to see if there are any errors there and check the .css file itself in your build. If the @imports don't work or something similar, it won't create a .css. – DorkyMork May 31 '14 at 15:21
I recently encountered the same issue where the CSS files were not being rewritten and it was because SASS was not installed for all users on that machine and was not compiling a CSS file. If there are no errors in your SCSS file, I would check your SASS install. – DorkyMork Jun 11 '14 at 14:12

Override the default colors using SASS

1 Answers1