如何覆盖\编辑 Zurb Foundation 基础 CSS 样式？

Posted 2023-02-22

【中文标题】如何覆盖\\编辑 Zurb Foundation 基础 CSS 样式？

【英文标题】：How to override\edit Zurb Foundation base CSS styles?如何覆盖\编辑 Zurb Foundation 基础 CSS 样式？

【发布时间】：2012-11-27 11:23:50

【问题描述】：

这是我第一次将 Zurb Foundation 用于 Web 项目。但是，我不确定是在单独的样式表上用我自己的样式覆盖他们的样式，还是直接编辑foundation.css。

例如这是他们的导航 css（在 foundation.css 内）：

.nav-bar 
    background: #4D4D4D;
    height: 40px;
    margin-left: 0;
    margin-top: 20px;
    padding: 0;

如果我想更改background 和margin-top，我是直接从foundation.css 编辑.nav-bar 还是创建自己的样式表（在style.css 下方放置style.css）并像这样覆盖它：

.nav-bar 
    background: #999;
    margin-top: 0;

这是好的做法吗？如果没有，最好的方法是什么？

【参考方案1】：

最佳做法是阅读 Zurb 基金会网站上的文档。第二个最佳做法是在您的下载文件中打开 2 个文件夹：css 和 js。在此文件夹中，您会发现：

app.css 和 app.js

这些是 Zurb 为您预先制作的文件，因此您可以开始覆盖他们的样式！

不建议接触foundation.js 或foundation.css。您将无法升级未来的选项，或者您可能会制动您不想制动的东西。快乐编码！

【讨论】：

或者如果你使用的是 sass，app.scss

【参考方案2】：

实际上，在 Foundation（或任何主要框架）上覆盖样式的最佳方法是使用它们的 SASS 和/或 Compass 版本。 （或者对于那些不幸尝试设置 Bootstrap 样式的人来说更少）

通过 _settings.scss 文件来更改颜色、高度和断点比尝试通过数千行 css 代码来确保您已覆盖所需的一切要容易得多。

是的，完成所有设置需要一些学习曲线，但从长远来看，它会为您节省数小时。

【参考方案3】：

其实你可以直接使用foundation.css文件。如果您创建自定义的 Foundation CSS 安装，而不是使用默认的 CSS 安装，您指定的自定义将驻留在此文件中。如果 Zurb 要更改此文件以解决错误和更新，则此文件必须在所有安装中都相同，不是吗？

Zurb 文档说“foundation.css，是一个 CSS 文件，如果您不需要分离实际的底层 Foundation CSS，您可以在您的页面中使用。”

【参考方案4】：

最佳做法是使用您描述的自定义 .css 文件覆盖他们的样式表。这样，如果发布了更新，例如错误修复，那么您只需替换foundation.css 文件。

如果您直接编辑foundation.css 文件并想要更新框架，那么您需要自己手动进行更新。

【讨论】：

我同意这一点。如果您下载自定义 css 版本（而不是 Sass / Compass 版本）也尤其如此，因为它允许您在添加/删除功能或更改使用的基本颜色时使用不同的基础修改。