Question

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

我需要有人对这个用法有所了解。

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

enter image description here

这是我的sass文件夹结构：

enter image description here

现在每次运行我的网站时，默认的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>

Answer 1

尝试

.foo {
    background: $color !important;
}

如果不起作用，请使用F12（或类似的浏览器工具）查看CSS的计算方式，并告诉您覆盖该值的内容。

使用SASS覆盖默认颜色

1 个答案: