Question

我正在尝试使用Zurb Foundation 4的下拉列表（制作下拉按钮）。我的html看起来像这样：我在Build with 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：我在“Build with Quick Mixins”部分下获得了来自here的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 mixins。要使用这些mixins，你需要拥有 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";

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

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

Answer 1

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

如果你做了

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

然后你的项目中有extension installed。

Answer 2

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

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

我是否需要在Zurb Foundation使用Mixins和Javascript？

2 个答案: