Search code examples
compass-sasssass

SCSS and Compass CLI configuration


How do I configure Compass when using the sass CLI?

Basically I was to set the images_dir property, here is the command I have been using:

sass 
    --compass
    path/to/input.scss
    path/to/output.css

I tried:

sass 
    --compass
    -c path/to/config.rb
    path/to/input.scss
    path/to/output.css

Output:

WARNING on line 1 of path/to/config.rb:
This selector doesn't have any properties and will not be rendered.
Syntax error: Invalid CSS after "image_dir ": expected selector, was "= "test""
    on line 1 of path/to/config.rb

So obviously the -c doesn't work the same way when using the compass compile command.

And

sass 
    --compass
    --images-dir path/to/images
    path/to/input.scss
    path/to/output.css

Output:

OptionParser::InvalidOption: invalid option: --images-dir

Likewise as above.

I tried to use the compass compile but I don't have a project directory.

compass compile 
    --images-dir path/to/images
    path/to
    path/to/input.scss

Output:

You must compile individual stylesheets from the project directory.

Also tried this:

compass compile 
    path/to

Output:

Nothing to compile. If you're trying to start a new project, you have left off the directory argument.

config.rb just contained:

images_dir = "test"

Solution

  • compass compile reads a config.rb file for the configuration.

    Here is an example project setup that that I use, starting with the config.rb file:

    require "susy"
    
    # Set this to the root of your project when deployed:
    http_path = "/"
    css_dir = "public/css"
    sass_dir = "private/scss"
    images_dir = "public/images"
    http_images_path = "/images"
    
    output_style = :expanded # or :nested or :compact or :compressed
    
    # To disable debugging comments that display the original location of your selectors. Uncomment:
    line_comments = true
    

    My project is setup like:

    private/scss    # scss files. I use a main file that handles imports itself
    public/images   # images
    public/css      # built css here
    config.rb       # contents included above
    

    To build it, I run the following in the project's root folder:

    bundle exec compass compile private/scss/layout.scss