How to make Compass to watch several folders simultaneously?

Question

I'm using Compass + Sass in order to manage/combine my .css files. So I have the following folder structure:

Root
--Module
----css
----sass
--Module
----css
----sass
--Module
----css
----sass

And here what I'd like to achieve: during development phase I'd like to point compass to my root folder and it should watch for any changes in files located at sass directories (in each Module). Once one of the .sass files changes - appropriate .css file should be generated (for the module changed .sass belongs to) and put into css folder under the same Module.

Is it possible?

My guess I should use config.rb for this purpose, but I'm not sure how to do this properly. Could someone point me to the solution or just describe general idea of how to do it?

EDIT: I'm on Windows environment, so can't use Linux commands (I can install Cygwin, but I'd prefer to avoid it)

Thanks

Answer 1

I've got my folder structure setup differently:

• assets
  • sass
    • modules
      • _module1.scss
      • _module2.scss
      • _module3.scss
    • screen.scss
  • stylesheets
    • screen.css
  • config.rb

screen.scss:

@import "modules/module1";
@import "modules/module2";
@import "modules/module3";

config.rb:

...
css_dir = "stylesheets"
sass_dir = "sass"
...

The underscores at the beginning of the module names mean that they won't be compiled into individual css files. The import statements combine them so that all css ends up combined in screen.css. Note that in the import statements, you don't need the underscores or the .scss.

You can modify this structure slightly if you want to maintain the individual css files (which is what you suggested you wanted to do). Remove the underscores, and compass will create the individual files.

• assets
  • sass
    • modules
      • module1.scss
      • module2.scss
      • module3.scss
    • screen.scss
  • stylesheets
    • modules
      • module1.css
      • module2.css
      • module3.css
    • screen.css
  • config.rb

In this case, you don't need any import statements in screen.scss, as each individual file will need to be included separately in the html document.

In both of these scenarios, you will run "compass watch" one time in the assets folder. Note that you don't need to create anything in the stylesheets directory. Compass will do that.

Answer 2

The only workaround I found is to run several Compass instances - one per module. I bet there could be more elegant solution by adjusting Compass source code, but unfortunately I'm not familiar with Ruby...yet.

Answer 3

Use additional_import_paths or the simpler add_import_path in your config.rb file.

additional_import_paths Array of Strings Other paths on your system from which to import sass files.

add_import_path Call this function to add a path to the list of sass import paths for your compass project. E.g.: add_import_path "/Users/chris/work/shared_sass"

See this answer with examples on how to use add_import_path

Source: http://compass-style.org/help/documentation/configuration-reference/

Answer 4

compile and watch several independent Sass Compass projects: https://stackoverflow.com/a/39635064/6440953