how do I import compass css3 module into a Foundation 5 project

Question

I'm creating Foundation 5 project using bower with:

foundation new PROJECT_NAME

I wanted to use the compass css3 mixin but I cannot understand how to import it or even if it is present in the project.

thankyou Francesco

Answer 1

I've started a project with Zurb Foundation 5 with Bower + Grunt + Libsass (as they recommend). I wanted to use, as Francesco Pensabene, a compass mixin (the sticky footer). I followed the instructions Using Foundation With Grunt + Libsass. The project is created successfully, but the Compass thing didn't work. I want to add in my app.scss:

@import
    "settings",
    "foundation/components/top-bar",
    "foundation/components/offcanvas",
    "compass/layout/sticky-footer";  //THE COMPASS MIXIN

Running foundation update doesn't add the compass mixins. To achieve it, I've gone through the following steps:

1. Foundation uses Bower (package manager). Install it with:

[sudo] npm install -g bower grunt-cli

2. Create the project as the documentation says:

foundation new project_name --libsass

3. Edit the project_name/bower.json file and add a dependency:

{
    "name": "foundation-libsass-template",
    "dependencies": {
        "foundation": "zurb/bower-foundation",
        "compass-mixins": "Igosuki/compass-mixins"
    }
}

Add the "compass-mixins": "Igosuki/compass-mixins". It's a repository with all the compass mixins ready to use with libsass.

4. Update the project (it'll download all the compass mixins and place them in the brower_components's folder)

foundation update

5. Edit Grunt.js and add the path where the new donloaded mixins are located.

(...)
options: {
    includePaths: [
        'bower_components/foundation/scss',
        'bower_components/compass-mixins/lib'
    ]
},
(...)

That's all. Now in your app.scss file you can import whatever compass mixin you like. Compile with grunt build, no errors.

Answer 2

I had the perfect answer from ZURB

http://foundation.zurb.com/forum/posts/513-adding-compass-to-new-project

There has been an updated install guide on the Docs page:

http://foundation.zurb.com/docs/upgrading.html

In the command line, run 'foundation new MY_PROJECT' by replacing MY_PROJECT with the folder you want to install the project on. After that, confirm that these folders exist on the directory you specified.

When starting a project run compass init and then compass watch (in Terminal) to watch for changes on the .sass files.

Then change the import of settings in app.scss from:

@import "settings";

To:

@import "foundation/_settings";

Once you've done that, run compass watch again.

Answer 3

Since the default CLI method provided by Zurb uses compass, compass will need to be installed already. This can be accomplished by

Bash

[sudo] npm install -g bower grunt-cli

[sudo] gem install compass

[sudo] gem install foundation

Default foundation install method uses compass

foundation new MY_PROJECT

Now be sure to run an update (not needed but good idea anyway)

cd MY_PROJECT

foundation update

At this point you can edit you scss/app.scss file to resemble what I have below to make sure compass is playing ball.

scss/app.scss

@import "settings";
@import "foundation";

$default-text-shadow-color: rgba(0,0,0, 1.0);
$default-text-shadow-blur: 5px;
$default-text-shadow-v-offset: 2px;

@import "compass/css3";

// Uses defaults set before the import above
.has-single-shadow {
  @include single-text-shadow;
}

// Can output up to ten text shadows
.has-custom-shadow {
  @include text-shadow(rgba(blue, 0.2) 1px 1px 0, rgba(blue, 0.2) 2px 2px 0, rgba(blue, 0.2) 3px 3px 0);
}

Answer 4

be sure to install compass and create a compass project in your foundation project

gem install compass
cd <myproject>
compass create

then

@import "compass";

should work.

Answer 5

use this on your scss file where you import your other components (eg. foundation.scss) :

@import "compass/css3";