Compass Source in Multiple Directories

Question

Have you had success compiling SASS in multiple directories? Can you set up compass to recursively watch a directory?

I have read the documentation on add_import_pa

Answer 1

Here is my solution that supports batch compass compile/watch of multiple independent SASS projects, based on two Ruby scripts.

Folder structure with the Ruby files:

Root
--compile.rb
--watch.rb
--Module1
----config.rb
----css
----sass
--Module2
----config.rb
----css
----sass
--Module3
----config.rb
----css
----sass

Run compile.rb and watch.rb with several arguments representing the paths to your module folders containing the config.rb files.

I.e. : ruby compile.rb Module1/ Module2/ Module3/

compile.rb

require 'rubygems'
require 'compass'
require 'compass/exec'

ARGV.each do |arg|
  Compass::Exec::SubCommandUI.new(["compile", arg, "--force"]).run!
end

I.e. : ruby watch.rb Module1/ Module2/ Module3/

watch.rb

require 'rubygems'
require 'compass'
require 'compass/exec'

threads = []
ARGV.each do |arg|
  threads << Thread.new {
    Compass::Exec::SubCommandUI.new(["watch", arg, "--force"]).run!
  }
  sleep(1)
end
threads.each { |thr| thr.join }

Notice that we need to create a separate thread for each compass watch (since they are blocking processes). sleep(1) is necessary because Compass::Exec::SubCommandUI is not actually thread-safe and might run several watches on the same module, instead of one on each. In case that happens, try increasing the sleep value.

Create a similar config.rb file in all modules. You might have to use compass init to get the a first config.rb that compass recognizes.

config.rb

http_path = "/"
css_dir = "css"
sass_dir = "sass"

Answer 2

Let's say you have the following directroy structure:

project
    |-- config.rb
    +-- apps
        |-- main.scss
        |-- app1
            +-- appst1.scss
        |-- app2
            +-- appst2.scss
        +-- app3
            +-- appst3.scss

Then adjust your config.rb:

sass_dir = "apps"
add_import_path "apps"
...

and in your main.scss include the other scss files:

@import "app1/appst1";
@import "app2/appst2";
@import "app3/appst3";