7

I want to add Compass to my existing project. I want to maintain my current project structure, which looks like this (simplified):

app/
build/    
 |-compass/
assets/
 |-css/
   |-scss
 |-js/
 |-img/

So I want all my SASS files under \assets\css\scss and I want to output the compiled CSS files to \assets\css.

Running: 

compass create --bare --sass-dir "assets\css\scss" --css-dir "assets\css"

creates the Compass config.rb file directly under my root.

However, I want the file to be under \build\compass.

  1. How can I control where Compass creates the config.rb file?
  2. Compass documentation says that declarations in config.rb (e.g. css_dir, sass_dir, etc.) are all relative to the project_path. Where do I define the project_path?
elanh
  • 1,401
  • 3
  • 19
  • 31

3 Answers3

4

Compass creates the config.rb in the same directory as where you ran the command from. The project path is where the config.rb resides. You're free to place config.rb wherever you like, as long as you adjust the paths for your assets.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • I run the command from the project root, and that's where config.rb is created. If I move the file, how does Compass know where I moved it to? It needs to know in order to run the compile command, for example. Furthermore, after moving the file, the paths defined there need to stay relative to where I ran the command from, not to the new location. So how can I just move the file? – elanh Sep 29 '13 at 20:48
  • You run `sass watch` (or compile) from the same directory as your config.rb – cimmanon Sep 30 '13 at 00:41
  • 2
    This is very confusing to me. Why would a library expect it can use a generic name such as "config" and place it in the root? I'm struggling to get this to work with ember-cli and a purchased theme, it's unclear how to integrate with other tools that make their own assumptions. – aceofspades May 06 '14 at 13:48
  • That would be a question for the maintainers of Compass. As I've already stated, the config.rb can be wherever you want as long as you run the `compass` command from the same directory. – cimmanon May 06 '14 at 13:51
1

This is an example of config.rb:

# Require any additional compass plugins here.
require 'compass/import-once/activate'

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "../../assets/css"
sass_dir = "../../assets/css/scss"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# Enable source map
sourcemap = true

And with this config.rb settings, your project folder should be like (as you wrote):

MyFolder
├ app
├ build 
│ └ compass
│   └ config.rb
└ assets
  ├ css/
  │ └ scss/
  ├ js
  └ img

If you don't have a config.rb, simply create a new file "config.rb" and copy/paste inside the configuration i wrote.

Open your terminal, enter in MyFolder/build/compass and then start your compass command, like: compass watch

Remember

You have to execute your compass command in the same folder where is the config.rb file. So in this case in MyFolder/build/compass. Otherwise compass doesn't work.

LorenzoD
  • 91
  • 5
-1

I don't see why you'd structure a project like this...I mean why not put the scss in build and then everything in assets can be deployed for production?

So: 1. Running (from "app" directory)

compass create build --http-pat="../" --sass-dir="compass/scss" --css-dir="../assets/css" --javascripts-dir="../assets/js" --images-dir="../assets/img"

will create the project folders and files as such:

app
 |-- build
 |     |--config.rb
 |     |-- compass
 |            |-- scss
 |-- assets
 |     |-- css
 |     |-- img
 |     |-- js
  1. Again, from within app directory, running:

compass config "build/config.rb" --http-pat="../" --sass-dir="compass/scss" --css-dir="../assets/css" --javascripts-dir="../assets/js" --images-dir="../assets/img"

will simply create the build directory and place a configuration file with these values in it.

Luke Watts
  • 601
  • 7
  • 15
  • Why does it matter where the OP wants to have their directories? It doesn't look like you're answering the question at all. – cimmanon Nov 04 '15 at 13:42
  • My answer works perfectly well. If he wants the scss in the assets/css folder OP only has to modify --sass-dir. My answer is relevant for more than one scenario or folder structure. – Luke Watts Nov 04 '15 at 15:44
  • And my point about seperating output from your scss is a perfectly valid! – Luke Watts Nov 04 '15 at 15:46