我是否需要在Zurb Foundation使用Mixins和Javascript？(Do I need to use both Mixins and Javascript in Zurb Founda

编程入门行业动态更新时间:2024-10-23 18:24:10

我是否需要在Zurb Foundation使用Mixins和Javascript？(Do I need to use both Mixins and Javascript in Zurb Foundation?)

我正在尝试使用Zurb Foundation 4的下拉列表（制作下拉按钮）。我的html看起来像这样：我在Build with Mixins部分下从这里得到了这个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”部分获得了mixins。

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

我能够在我的页面上看到一个按钮，但是当我点击它时，没有选项下拉列表。

我不明白为什么有两个关于下拉菜单的文档页面。当文档说“您需要安装扩展程序”时，文档的含义是什么？有关详细信息，请参阅下文。

在本页的Build with Mixins部分中： http ： //foundation.zurb.com/docs/components/dropdown.html

它说：

我们已经包含了用于设置按钮样式的SCSS mixins。要使用这些mixin，您需要安装扩展程序或从Github获取_variables.scss，_buttons.scss，_global.scss和_dropdown-buttons.scss并将它们放入项目目录中的Foundation文件夹中。从那里，您可以导入自己的SCSS样式表顶部的文件，如下所示：

当我点击“ 扩展已安装 ”时，它将带我进入Gem页面入门。我按照说明安装了sass并创建了我的第一个项目。我认为这就是“你需要安装扩展程序 ”的意思，对吗？

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文件中，所以我手动添加了它。这会导致问题吗？

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

I am trying to use dropdowns (to make a dropdown button) with Zurb Foundation 4. My html looks like this: I got this html from here under the Build with Mixins section.

Here is my scss: I got the mixins from here under the "Build with Quick Mixins" section.

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

I am able to see a button on my page, but when I click it there is no dropdown with options.

I don't understand why there are two documentation pages about dropdown menus. What does the documentation mean when it says "you'll need to have the extension installed" See below for more details.

In the Build with Mixins section of this page : http://foundation.zurb.com/docs/components/dropdown.html

It says this:

We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _buttons.scss, _global.scss and _dropdown-buttons.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

When I click on 'extension installed' it takes me to the Getting Started with the Gem page. I have followed the instructions to install sass and created my first project. I assume this is all that it means by "you'll need to have the extension installed", correct?

The Quick Mixin section on the Dropdown documentation page also says to import these files:

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

When I went to my app.scss file, I found the following two lines commented out. So I uncommented them.

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

I also noticed that @import "foundation/variables"; was not included in my app.scss file at all, so I added it manually. Is this going to cause a problem?

What am I doing wrong? Do I need to be using the javascript solution along with the Mixins, or are they two separate things? I know this is a lot of questions, but I'm not sure where to start with this.