sass --watch : Compile only 1 css with many sources

Question

Hie everyone !

My Sass project looks like this :

Project
├── sass/
│   ├── bootstrap/
│   │   ├── ...
│   │   ├── _bootstrap.scss
│   ├── mymodule/
│   │   ├── submodules/
│   │   ├── _mymodule.scss /*with only @import from submodules/ */
|   └── main.scss /* various styles & @import bootstrap, mymodule */
└── stylesheets/
    └── main.css

I'm trying to watch every modifications:

• in the whole mymodule folder
• in main.scss

And alterate only stylesheets/main.css with modifications i made.

Every commands I wrote have generate mymodule.css or others scss files/folders.

What is the sass --watch for doing this please ?

Thanks a lot in advance !

Alexis

Answer 1

You should totally use Compass! 

What Compass is

Compass is a must-have tool for every SASS coder. Compass consists of two parts:

• a meta-framework for SASS;
• a command line tool used for compiling Compass projects and doing other useful stuff.

The compass watch command is exactly what you're looking for. It will recompile the CSS whenever you save a change in any of the following:

• every non-partial file inside the sass folder (in your case it's only main.scss);
• every partial imported by one of the above (recursively).

Partials that are never imported are ignored.

Compass will create a separate CSS file for every non-partial file. As for partials, they do not appear as separate CSS files because are incorporated inside non-partials.

Ridiculously short installation guide

For the following to work, you must have Ruby and RubyGems. Probably you already have them.

To start using Compass, do:

1. Install Compass with RubyGems: gem install compass.
2. Create a compass.rb file in the root of your project (in your case it's Project/compass.rb).
3. Run compass watch and start coding.

Example of a config.rb file

Here's a minimal compass.rb that might work for you:

css_dir =   "stylesheets"
sass_dir =  "sass"