sass - 使用 Foundation 导入 Compass CSS3 mixins

Question

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

我认为 compass 已经安装好了，因为在设置 Foundation 之前我输入了: gem install compass 我在使用 SASS 时将 compass watch 运行到项目文件夹中。所有 Foundation mixin 似乎都使用 Compass 编译 SCSS。

我创建了一个新的 compass 项目并合并了 SCSS 文件，然后尝试添加:

@import "compass/css3"

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

Answer 1

如果你使用的是foundation 4的sass/compass版本，并且通过使用创建了一个项目

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

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

这允许您使用任何 css3 mixins在您的文件中，例如:

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

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

@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;
}