如何将compass css3模块导入到Foundation5项目中

Question

我正在使用带有的bower创建Foundation 5项目

基础新PROJECT_NAME

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

谢谢Francesco

Answer 1

我已经在Zurb Foundation 5与Bower+Grunt+Libsass开始了一个项目（正如他们推荐的那样）。我想像弗朗切斯科·彭萨本一样使用指南针混音器（粘性页脚）。我按照说明使用Grunt+Libsass的基础。该项目创建成功，但Compass的功能不起作用。我想在我的应用程序中添加。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.编辑project_name/bower.json文件并添加依赖项：

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

添加"compass-mixins": "Igosuki/compass-mixins"。它是一个存储库，包含了所有可与libsas一起使用的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.scs文件中，您可以导入任何您喜欢的指南针mixin。使用grunt build编译，没有错误。

Answer 2

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

@import "compass/css3";

Answer 3

确保安装指南针并在基础项目中创建指南针项目

gem install compass
cd <myproject>
compass create

然后

@import "compass";

应该起作用。

Answer 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文件，类似于我下面的文件，以确保指南针正在打球。

scs/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"。然后，确认这些文件夹存在于您指定的目录中。

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

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

@导入"设置"；

收件人：

@导入"foundation/settings"；

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