Importing Compass CSS3 mixins with Foundation

Question

I have Foundation installed and working, but I'm trying to use Compass CSS3 mixins within the same project and can't seem to figure out how to include them.

I thought compass was installed already because prior to setting up Foundation I entered: gem install compass and I when using SASS I run compass watch into project folder. All Foundation mixins seems to compile SCSS with Compass..

I created a new compass project and merged the SCSS files and then tried to add:

@import "compass/css3"

Any help as to what I should run in the command line or add into files to access these mixons would be greatly appreciated.

Solution

If you are using the sass/compass version of foundation 4 and created a project by using

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

Then you would add @import "compass/css3" to the stylesheets/app.scss at the top of the file.

This allows you to use any of the css3 mixins in your file, such as:

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

You must run compass watch or run compass compile in your project directory after you make the changes to have the new css generated.

@import is loading the libary and @include is the method that generates css within your class.

UPDATE:

I am showing a modified app.scss file (truncated) so you can see how I made the modifications:

// 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);
}

which generates the following in 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;
}