使用Foundation导入Compass CSS3 mixins

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正在加载libary并且@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;
}