如何覆盖\编辑 Zurb Foundation 基础 CSS 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13794318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override\edit Zurb Foundation base CSS styles?
提问by catandmouse
It's my first time using Zurb Foundation for a web project. However, I'm not sure whether to override their styles with my own on a separate stylesheet or directly edit foundation.css.
这是我第一次使用 Zurb Foundation 进行网络项目。但是，我不确定是在单独的样式表上用我自己的样式覆盖它们的样式还是直接编辑foundation.css.
For example this is their nav css (inside foundation.css):
例如，这是他们的导航 css（内部foundation.css）：
.nav-bar {
background: #4D4D4D;
height: 40px;
margin-left: 0;
margin-top: 20px;
padding: 0;
}
If I want to change the backgroundand margin-top, do I directly edit .nav-barfrom foundation.cssor create my own stylesheet (put a style.cssbelow foundation.css) and override it like so:
如果我想改变background和margin-top，做我直接编辑.nav-bar从foundation.css或创建自己的样式表（把style.css以下foundation.css），并覆盖它，像这样：
.nav-bar {
background: #999;
margin-top: 0;
}
Is this good practice? If not, what would be the best way to go about it?
这是好的做法吗？如果没有，最好的方法是什么？
回答by Ed Charbeneau
Best practice is to override their style sheet using a custom .css file like you described. This way if an update is released, for example a bug fix, then you just replace the foundation.css file.
最佳做法是使用您描述的自定义 .css 文件覆盖其样式表。这样，如果发布了更新，例如错误修复，那么您只需替换foundation.css 文件。
If you edit the foundation.css file directly and would like to update the framework, then you would need to manually make the updates yourself.
如果您直接编辑foundation.css 文件并想要更新框架，那么您需要自己手动进行更新。
回答by Hercules S.
Best practice is to read documentationon Zurb Foundation website. Second best practice is to open 2 folders within your download: cssand js. Within this folders you will find:
最佳实践是阅读Zurb Foundation 网站上的文档。第二个最佳实践是在下载中打开 2 个文件夹：css和js。在此文件夹中，您会发现：
app.cssand app.js
app.css和app.js
These are the files Zurb pre-made for you, so you can start overriding their styles!
这些是 Zurb 为您预先制作的文件，因此您可以开始覆盖它们的样式！
It is not recommended to touch foundation.js or foundation.css . You will not be able to upgrade for future options or you may brake something you don't want to brake. Happy Coding!
不建议触摸foundation.js 或foundation.css。您将无法为未来的选项升级，或者您可能会刹车一些您不想刹车的东西。快乐编码！
回答by Malcolm
Actually, you can just use the foundation.css file. If you create a custom Foundation CSS install, rather than using the default CSS install, the customizations you indicate reside in this file. If Zurb was going to change this file to address bugs and updates, this file would have to be the same across all installs, wouldn't it?
实际上，您可以只使用foundation.css 文件。如果您创建自定义 Foundation CSS 安装，而不是使用默认 CSS 安装，则您指示的自定义位于此文件中。如果 Zurb 要更改此文件以解决错误和更新，则此文件在所有安装中都必须相同，不是吗？
Zurb documentation says "foundation.css, is a CSS file you can use in your pages if you don't need to pick apart the actual underlying Foundation CSS."
Zurb 文档说“foundation.css 是一个 CSS 文件，如果您不需要分离实际的基础 Foundation CSS，则可以在您的页面中使用它。”
回答by RioBrewster
Actually the best way to override the styles on Foundation (or any major framework) is to use their SASS and/or Compass version. (or LESS for those unfortunate enough to be trying to style Bootstrap)
实际上，在 Foundation（或任何主要框架）上覆盖样式的最佳方法是使用它们的 SASS 和/或 Compass 版本。（或者对于那些不幸尝试设置 Bootstrap 样式的人来说更少）
It's much easier to go through the _settings.scss file to change colors, heights and breakpoints than to try slogging through thousands of lines of css code to make sure you've overridden everything you need to.
通过 _settings.scss 文件更改颜色、高度和断点比尝试通过数千行 css 代码来确保覆盖所有需要的内容要容易得多。
Yes it's a bit of a learning curve to get it all set up, but it will save you hours in the long run.
是的，完成所有设置需要一些学习曲线，但从长远来看，它可以为您节省数小时。
