使用 SASS 覆盖默认颜色 [重复]答案

【问题标题】：Override the default colors using SASS [duplicate]使用 SASS 覆盖默认颜色 [重复]
【发布时间】：2014-07-21 05:05:19
【问题描述】：

我是这个“foundation”的新手，并试图很难改变 HTML 正文的背景颜色。

我需要有人解释一下这个的用法。

我已经下载了foundation 5最新版本并包含在我的MVC项目中，这是它的文件夹结构

这是我的 sass 文件夹结构：

现在，当我每次运行我的网站时，默认的 css 应用是foundation.css。那么如何覆盖它的背景主体颜色

我已经在我的Site.scss 中这样做了，但颜色不适用。

/* 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 ;
}

最后这是我的 _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>

【问题讨论】：

标签： css asp.net-mvc-4 sass overriding zurb-foundation

【解决方案1】：

试试

.foo {
    background: $color !important;
}

如果这不起作用，请使用 F12（或类似的浏览器工具）查看 CSS 是如何计算的，它应该会告诉您是什么覆盖了该值。

【讨论】：

@DorkyMork-我在使用 !important 之前尝试过，但没有奏效，我也使用了 google inspector 和 firebug for firefox，但没有一个帮助我，我试图删除所有 cookie 并重新加载它但是结果是一样的
也可能是在编译时没有创建 CSS，请检查那里是否有任何错误并检查构建中的 .css 文件本身。如果 @imports 不起作用或类似的东西，它不会创建一个 .css。
我最近遇到了 CSS 文件没有被重写的相同问题，这是因为没有为该机器上的所有用户安装 SASS 并且没有编译 CSS 文件。如果您的 SCSS 文件中没有错误，我会检查您的 SASS 安装。