Question

我正在使用bower创建Foundation 5项目：

成立新的PROJECT_NAME

我想使用指南针css3 mixin，但我无法理解如何导入它，或者即使它存在于项目中也是如此。

三江源弗朗西斯

Answer 1

我已经与Zurb Foundation 5开始了一个项目，包括Bower + Grunt + Libsass（他们推荐）。作为Francesco Pensabene，我想使用指南针混合（粘性页脚）。我按照说明使用Foundation With Grunt + Libsass。项目已成功创建，但 Compass 事件无效。我想添加 app.scss ：

@import
    "settings",
    "foundation/components/top-bar",
    "foundation/components/offcanvas",
    "compass/layout/sticky-footer";  //THE COMPASS MIXIN

运行基础更新不会添加指南针mixins。为实现这一目标，我已经完成了以下步骤：

1。基金会使用 Bower （包管理器）。安装时使用：

[sudo] npm install -g bower grunt-cli

2。按照文档说明创建项目：

foundation new project_name --libsass

3. 编辑 project_name / bower.json 文件并添加依赖项：

{
    "name": "foundation-libsass-template",
    "dependencies": {
        "foundation": "zurb/bower-foundation",
        "compass-mixins": "Igosuki/compass-mixins"
    }
}

添加 "compass-mixins": "Igosuki/compass-mixins" 。它是一个存储库，所有指南针mixin都可以用于 libsass 。

4. 更新项目（它会下载所有指南针mixin 并将它们放在 brower_components 的文件夹中）

foundation update

5. 编辑Grunt.js并添加新的已加载的mixin所在的路径。

(...)
options: {
    includePaths: [
        'bower_components/foundation/scss',
        'bower_components/compass-mixins/lib'
    ]
},
(...)

这就是全部。现在，您可以在 app.scss 文件中导入您喜欢的任何指南针混音。使用grunt build进行编译，没有错误。

Answer 2

在导入其他组件的scss文件中使用它（例如，foundation.scss）：

@import "compass/css3";

Answer 3

务必在基础项目中安装指南针并创建指南针项目

gem install compass
cd <myproject>
compass create

然后

@import "compass";

应该有用。

Answer 4

由于Zurb提供的默认CLI方法使用指南针，因此需要安装指南针。这可以通过

来完成

<强>击

[sudo] npm install -g bower grunt-cli

[sudo] gem install compass

[sudo] gem install foundation

默认基础安装方法使用指南针

foundation new MY_PROJECT

现在一定要运行更新（不需要，但无论如何都是好主意）

cd MY_PROJECT

foundation update

此时你可以编辑scss / app.scss文件，使其与下面的内容类似，以确保指南针正在播放球。

<强> SCSS / app.scss

@import "settings";
@import "foundation";

$default-text-shadow-color: rgba(0,0,0, 1.0);
$default-text-shadow-blur: 5px;
$default-text-shadow-v-offset: 2px;

@import "compass/css3";

// Uses defaults set before the import above
.has-single-shadow {
  @include single-text-shadow;
}

// Can output up to ten text shadows
.has-custom-shadow {
  @include text-shadow(rgba(blue, 0.2) 1px 1px 0, rgba(blue, 0.2) 2px 2px 0, rgba(blue, 0.2) 3px 3px 0);
}

Answer 5

我得到了ZURB的完美答案

http://foundation.zurb.com/forum/posts/513-adding-compass-to-new-project

“文档”页面上有一个更新的安装指南：

http://foundation.zurb.com/docs/upgrading.html

在命令行中，通过将MY_PROJECT替换为要安装项目的文件夹来运行“foundation new MY_PROJECT”。之后，请确认您指定的目录中存在这些文件夹。

启动项目时，运行指南针init然后指南针监视（在终端中）以监视.sass文件的更改。

然后从以下位置更改app.scss中的设置导入：

@import“settings”;

要：

@import“foundation / _settings”;

完成后，再次运行指南针。

如何将罗盘css3模块导入Foundation 5项目

5 个答案: