如何将 compass css3 模块导入 Foundation 5 项目答案

【问题标题】：how do I import compass css3 module into a Foundation 5 project如何将 compass css3 模块导入 Foundation 5 项目
【发布时间】：2014-05-13 01:20:25
【问题描述】：

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

基金会新项目名称

我想使用 compass css3 mixin，但我不明白如何导入它，或者即使它存在于项目中。

谢谢你弗朗切斯科

【问题讨论】：

标签： zurb-foundation compass-sass

【解决方案1】：

我已经与 Bower + Grunt + Libsass 一起使用 Zurb Foundation 5 开始了一个项目（正如他们所推荐的那样）。作为 Francesco Pensabene，我想使用一个指南针 mixin（粘性页脚）。我按照使用Foundation With Grunt + Libsass 的说明进行操作。项目创建成功，但是 Compass 的东西没有工作。我想在我的 app.scss 中添加：

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

运行 foundation update 不会添加 compass mixin。为了实现它，我经历了以下步骤：

1. Foundation 使用 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"。这是一个存储库，其中包含所有可与 libsass 一起使用的 compass mixin。

4. 更新项目（它将下载所有 compass mixins 并将它们放在 brower_components 的文件夹中）

foundation update

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

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

就是这样。现在在您的 app.scss 文件中，您可以导入任何您喜欢的 compass mixin。使用grunt build 编译，没有错误。

【讨论】：

【解决方案2】：

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

@import "compass/css3";

【讨论】：

你有安装指南针吗？

【解决方案3】：

一定要安装 compass 并在你的基础项目中创建一个 compass 项目

gem install compass
cd <myproject>
compass create

然后

@import "compass";

应该可以。

【讨论】：

【解决方案4】：

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

重击

[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);
}

【讨论】：

【解决方案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”。之后，确认这些文件夹存在于您指定的目录中。

启动项目时，运行 compass init，然后运行 compass watch（在终端中）以观察 .sass 文件的变化。

然后将 app.scss 中设置的导入从：

@import "设置";

收件人：

@import "foundation/_settings";

完成后，再次运行 compass watch。

【讨论】：