Speed up response time in development after a Sass change

Updated . Posted . Visible to the public.

When working with large Sass Show archive.org snapshot files you will notice that the first request after a change to a Sass file takes quite some time. This is because the CSS files are being generated from the Sass files the moment the application answers your request (Sass looks at the files and recompiles if the timestamp changed); it takes even longer when you build sprites with the Lemonade gem.

To avoid this, have Sass watch the files for changes and compile them into CSS files immediately. The files will be created while you are still on something else, allowing the first request to be served without a Sass compile.

  • For plain Sass (no lemonade) run the following from your project directory:
    sass --watch public/stylesheets/sass:public/stylesheets
    That keeps an eye on all .sass files inside public/stylesheets/sass (and subdirectories) and compiles them into their corresponding CSS files inside public/stylesheets.

  • When your project uses Lemonade just call:
    compass watch

When using the latter you do not need to sass --watch explicitly as compass does that already.

Arne Hartherz
Last edit
Keywords
development, environment
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2011-03-14 16:26)