3

我已经安装并工作了 Foundation，但我试图在同一个项目中使用 Compass CSS3 mixins，但似乎无法弄清楚如何包含它们。

我认为指南针已经安装，因为在设置 Foundation 之前我输入了： gem install compass并且我在使用 SASS 时遇到compass watch了项目文件夹。所有 Foundation mixin 似乎都用 Compass 编译 SCSS ..

我创建了一个新的指南针项目并合并了 SCSS 文件，然后尝试添加：

@import "compass/css3"

任何关于我应该在命令行中运行什么或添加到文件中以访问这些 mixons 的帮助将不胜感激。

4

2 回答 2

5

如果您使用 Foundation 4 的 sass/compass 版本并使用

compass create myproject -r zurb-foundation --using foundation

然后，您将添加@import "compass/css3"到stylesheets/app.scss文件顶部。

这允许您在文件中使用任何css3 mixin，例如：

.myclass {
  @include border-radius(12);
}

进行更改以生成新的 css 后，您必须在项目目录中运行compass watch或运行。compass compile

@import正在加载库，并且@include是在您的类中生成 css 的方法。

更新：

我正在显示一个修改过的app.scss文件（截断），所以你可以看到我是如何进行修改的：

// Global Foundation Settings
@import "settings";

// Comment out this import if you don't want to use normalize
@import "normalize";

// Comment out this import if you are customizing you imports below
@import "foundation";

// Import Compass CSS3 Stuff
@import "compass/css3";

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

// @import "foundation/components/global"; // *always required
// ...
// @import "foundation/components/dropdown";

.myclass {
  @include border-radius(12);
}

在中生成以下内容stylesheets/app.css：

/* line 52, ../sass/app.scss */
.myclass {
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  -ms-border-radius: 12;
  -o-border-radius: 12;
  border-radius: 12;
}
于 2013-06-08T18:06:00.910 回答
-1

在项目目录中，我install compass再次键入并成功了。

在项目的某个时刻，我要么输入错误，要么按错误的顺序或目录执行此操作。

我认为 Compass 本身已经安装，因为我已经安装了 Foundation，但即使它是，在项目中也无法访问这些文件。

之后 Compass 可以通过我之前在我的 SCSS 文件“compass/css3”中设置的路径使用。

于 2013-06-13T06:42:12.557 回答