Zurb foundation 如何将指南针CSS3模块导入基础5项目 我用BoWER创建基础5项目：

基金会新项目名称

我想使用compass css3 mixin，但我不知道如何导入它，甚至不知道它是否存在于项目中

谢谢

---

弗朗西斯科

在您的SCSS文件中使用此文件，导入其他组件（例如，基础.SCSS）：

---

<>请确保在你的基金项目

中安装罗盘和创建指南针项目

gem install compass
cd <myproject>
compass create

---

应该可以工作。

因为Zurb提供的默认CLI方法使用compass，所以需要已经安装compass。这可以通过以下方式实现：

Bash

[sudo] npm install -g bower grunt-cli

[sudo] gem install compass

[sudo] gem install foundation

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

foundation new MY_PROJECT

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

此时，您可以编辑您的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);
}

---

我从ZURB那里得到了完美的答案

文档页面上有更新的安装指南：

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

启动项目时，运行compass init，然后运行compass watch（在终端中）以监视.sass文件上的更改

然后将app.scss中设置的导入更改为：

@导入“设置”

致：

@导入“基础/_设置”

完成后，再次运行指南针手表

---

我已经开始了ZURB基金会5与Boe+ Grut+ Libsas的项目（如他们所建议的）。作为弗朗西斯科·彭萨宾，我想使用指南针混音器（粘脚）。我按照指示使用。该项目已成功创建，但“指南针”功能不起作用。我想在我的app.scss中添加：

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

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

<强> 1。< /强>基金会使用<强> Bower < /强>（包管理器）。安装时请使用：

[sudo] npm install -g bower grunt-cli

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

foundation new project_name --libsass

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

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

添加

“指南针混音”：“Igosuki/compass混音”

。它是一个包含所有compass Mixin的存储库，可与libsass一起使用

4.更新项目（它将下载所有指南针混音器，并将它们放在浏览器组件文件夹中）

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

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

---

就这些。现在，在你的app.scss文件中，你可以导入任何你喜欢的compass mixin。使用grunt build编译，无错误。

是否安装了compass？

foundation new project_name --libsass

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

foundation update

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