我需要在 Zurb Foundation 中同时使用 Mixins 和 Javascript 吗？答案

【问题标题】：Do I need to use both Mixins and Javascript in Zurb Foundation?我需要在 Zurb Foundation 中同时使用 Mixins 和 Javascript 吗？
【发布时间】：2013-12-03 13:04:36
【问题描述】：

我正在尝试在 Zurb Foundation 4 中使用下拉菜单（制作下拉按钮）。我的 html 看起来像这样：我从“使用 Mixins 构建”部分下的 here 获得了这个 html。

  <a href="#" data-dropdown="drop1" class="login">Login</a><br>

    <ul id="drop1" class="f-dropdown">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

这是我的scss：我从 here 在“使用 Quick Mixins 构建”部分下获得了 mixins。

.login {
   @include grid-column(2);
   @include button;
   @include dropdown-button;
}
.login:hover {
   color: #fff;
   background-color: #34AADC; 
}

我可以在我的页面上看到一个按钮，但是当我单击它时，没有带有选项的下拉菜单。

我不明白为什么有两个关于下拉菜单的文档页面。
文档中说“您需要安装扩展程序”是什么意思，请参阅下文了解更多详细信息。

在此页面的使用 Mixins 构建部分：http://foundation.zurb.com/docs/components/dropdown.html

上面写着：

我们已经包含了用于设置按钮样式的 SCSS 混合。要使用这些 mixin，你需要有 extension installed 或获取 _variables.scss，来自 Github 的 _buttons.scss、_global.scss 和 _dropdown-buttons.scss 并将它们放入项目目录中的 Foundation 文件夹中。从在那里，您可以在自己的 SCSS 顶部导入文件样式表，像这样：

当我单击“extension installed”时，它会将我带到 Gem 入门页面。我已按照说明安装 sass 并创建了我的第一个项目。我认为这就是“您需要 extension installed”的全部含义，对吗？

Dropdown 文档页面上的 Quick Mixin 部分还说要导入这些文件：

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/dropdown";

当我转到我的 app.scss 文件时，我发现以下两行被注释掉了。所以我取消了它们的注释。

 @import "foundation/components/global";
 @import "foundation/components/dropdown";

我还注意到 @import "foundation/variables"; 根本没有包含在我的 app.scss 文件中，所以我手动添加了它。这会导致问题吗？

我做错了什么？我需要将 javascript 解决方案与 Mixins 一起使用，还是它们是两个独立的东西？我知道这是很多问题，但我不知道从哪里开始。

【问题讨论】：

标签： javascript sass zurb-foundation mixins

【解决方案1】：

你还需要include the relevant scripts ("Using the Javascript"); mixins 只处理样式。

如果你这样做了

compass create <project-name> -r zurb-foundation --using foundation

那么你的项目中有extension installed。

【讨论】：

【解决方案2】：

我需要将 javascript 解决方案与 Mixins 一起使用，还是它们是两个独立的东西？

是的，它们是分开的。 Mixins 只是帮助你编写 CSS，它们不会为你编写任何 HTML。 mixin 是使用标准 CSS 的替代品。您仍然需要在 HTML 中包含 JS。

【讨论】：