Use Compass

[szyam]

Hi. Can you simply use compass on this theme? I'm not having luck.

[manwithacat]

One option is to install grunt-contrib-compass, and amend the watch task to use the compass compiler instead of sass. The Gruntfile.js ends up with something like:

watch: {
      grunt: { files: ['Gruntfile.js'] },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['compass']
      }
    },

    compass: {
      dist: {
        options: {
          config: 'config.rb'
        }
      }
    },

Then you can run grunt watch and you're good to go.

[olefredrik]

Nice, @jmbarlow 👍

[sugarskill]

Hi,

The problem is that once compass is installed and take over sass in Gruntfile.js, ['bower_components/foundation/scss'] doesn't load anymore.

Get this error:

error scss/app.scss (Line 13 of scss/config/_settings.scss: File to import not found or unreadable: foundation/functions.

Tried add_import_path = "bower_components/foundation/scss" and extensionsDir = "bower_components/foundation/scss" in the config.rb, without success. Any hint?

[sugarskill]

Ok forget the additionnal path in config.rb and add it in Gruntfile.js instead

compass: {
      dist: {
        options: {
           config: 'config.rb',
           importPath: ['bower_components/foundation/scss']
        }
      }
    }

Just need to @import compass files in app.scss then.

[szyam]

Awesome, thanks! Ended up just running with grunt on this project but will try this out next time.

[Pixelsmith]

For those of us command line-phobes using compass.app with FoundationPress you simply need to replace the @import commands in scss/app.scss and scss/config/_settings.scss with the absolute path to the files.

So in app.scss replace @import "foundation"; with @import "../bower_components/foundation/scss/foundation";

In _settings.scss replace @import "foundation/functions"; with @import "../../bower_components/foundation/scss/foundation/functions";

[adzay]

Hi, I don't know what I am getting wrong but trying to use this thread a s a tutorial to install compass resulted in errors and me having re-install the theme multiple times. I even tried the grunt-contrib-compass option but that resulted in the same.

Is someone willing to give me an idiots guide on adding compass to a clean install of this theme?

[manwithacat]

Front-end tooling for Foundation can be handled in two ways - with Compass or with lib-sass. FoundationPress uses the lib-sass approach, where the compilation of SCSS files into CSS is performed using a grunt task.

To use Compass with FoundationPress, you need a 'config.rb' file. This provides configuration parameters for the compass command line tool. Optionally, you can also trigger Compass compilation via Grunt, which is the purpose of the code block right at the start of the thread [when added to Gruntfile.js].

Here's an example 'config.rb' that I use with FoundationPress. With this, you'll get the same output regardless of whether you use Grunt/lib-sass or Compass [or Grunt/Compass if you configure that]

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"

#Additional paths
css_dir = "css"
sass_dir = "scss"
images_dir = "assets/img"
javascripts_dir = "js"

# Preferred output style:
output_style = :compressed;

Foundation's documentation on SASS

[olefredrik]

👍