Question

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

我认为指南针已经安装，因为在设置基础之前我输入了： gem install compass和我在使用SASS时将compass watch运行到项目文件夹中。所有Foundation mixins似乎都用Compass编译SCSS ..

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

@import "compass/css3"

我将非常感谢您在命令行中运行或添加到文件中以访问这些混音的任何帮助。

Answer 1

如果您正在使用基础4的sass / compass版本并使用

创建项目

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

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

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

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

Answer 2

在项目目录中，我再次输入install compass，这就是诀窍。

在项目的某个时刻，我输错了或者在错误的序列或目录中做错了。

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

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

使用Foundation导入Compass CSS3 mixins

2 个答案: