一些 Foundation 5 实用程序类在 Foundation 6 中不起作用答案

【问题标题】：Some Foundation 5 Utility Classes Not Working in Foundation 6一些 Foundation 5 实用程序类在 Foundation 6 中不起作用
【发布时间】：2016-05-01 04:35:20
【问题描述】：

我在 Zurb 的网站以及 SO 上的其他帖子上搜索了答案，但没有找到任何似乎可以解决此问题的内容。

我正在使用 Foundation 6（尝试了网站和 Zurb 模板）。许多实用程序类都在工作，例如顶栏、行、大、小、中列、类等。默认模板也能正常工作，并显示不同的标注元素、按钮等。

Foundation 5 中提供的一些实用程序类在 6 中不起作用，例如 text-left、text-right、float 类（例如左右）或颜色类（例如白色、黑色等）。我确定还有其他的，但这些是我迄今为止遇到过的课程。

我检查了 app.scss 以确保没有任何内容被注释掉。我还检查了 gulpfile.js，它包括所有资产、基础站点的 SASS，并且没有注释掉任何 javascript 文件。

例如，Zurb site 中的这段代码，在 v5.5.3 下不会激活面板类或 Foundation 6 中的左右浮动。

<div class="panel clearfix">
  <a class="button right">Float Right</a>
  <a class="button left">Float Left</a>
</div>

在我的 default.html 布局中，我有以下样式表：

<link rel="stylesheet" href="{{root}}assets/css/foundation.min.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css">

以及以下 javascript 文件：

<script src="{{root}}assets/js/jquery.min.js"></script>
<script src="{{root}}assets/js/what-input.min.js"></script>
<script src="{{root}}assets/js/foundation.min.js"></script>
<script src="{{root}}assets/js/app.js"></script>

我是否缺少文件引用，是否可以检查其他内容以使这些类正常工作，或者这些实用程序类在 Foundation 6 中不再可用？

【问题讨论】：

您是否确认您的 CSS 文件确实包含您正在使用的类？
可能重复：stackoverflow.com/questions/34537431/…
@cimmanon，好电话。我刚刚检查并发现不包括颜色类，并且 .left 和 .right 现在是 .float-left .float-right 和 .clearfix 仍然存在。我只是在寻找其他一些类时碰巧找到了浮动类。有没有可能在某处有一个参考文档显示哪些类从 Foundation 5 发生了变化？
@cimmanon，感谢您提供指向 SO 问题的链接。这可能是我一直在寻找的解决方案。
@cimmanon，那篇文章没有解决我的整体问题。答案中说明的所有内容实际上对于我的设置都是正确的。因此，更多的是关于一些实用程序类以及它们现在可能被称为什么。我将浏览foundation.css 文件，看看是否可以通过这种方式识别它们。如果有一个 Zurb 参考列出了从 Foundation 5 更新的类名，那将非常有帮助。

标签： css sass zurb-foundation zurb-foundation-6

【解决方案1】：

答案显然是某些类名已更改，而其他类名可能已被删除。在更新概述类的 F6 文档之前，它需要在 css 中搜索服务于该目的的类或添加自定义类。

编辑：为了进一步澄清，我发现此页面上列出的颜色 - http://foundation.zurb.com/sites/docs/global.html 指的是使用的颜色，但类不起作用。

例如，将“alert”作为类添加到元素应该将它们涂成红色，这在上面引用的页面中列出。

他们的例子，将“次要”添加到按钮元素。

要为组件着色，请将颜色名称添加为类。

<button class="button">Primary Action</button>
<button class="secondary button">Secondary Action</button>

它不会改变颜色，因为“.secondary”不是 Foundation 6 中的 css 类。我通过查看 _settings.scss 文件发现这些实际上是应用于不同类的 SASS 全局变量。 .success 和其他文件也是如此。 ".alert" 是一个类，但仅在与其他颜色一起应用时才具有样式。

如果您没有找到您要查找的类或某些内容不起作用，最好检查 _settings.scss 文件。

【讨论】：