Last Updated: September 09, 2019
·
6.883K
· shlidor

Sass + Compass compile two different files for development and production environment [Take 2]

Today I read a very interesting idea by @martijndevalk.

It was about compiling Sass files, using Compass, for production and for development at the same time.

This is very smart - instead of re-compiling for production before you push your CSS to the live server you can simply compile two versions of your style sheets using a single command!
Martin's suggestion was to use a script that will run two compass watch processes, one with -e development and the other with -e production, then copying the production style sheet into a .min.css file.

I really like the idea but I decided to take a different approach - I will create a different configuration file for my production environment, and compile using this configuration into a different location. This is how it works:

config.rb

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

output_style = :expanded
line_comments = true

# This is where the magic happens, nothing too fancy though...
on_stylesheet_saved do
  `compass compile -c config_prod.rb --force`
end

config_prod.rb

http_path = "/"
css_dir = "css/prod"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

output_style = :compressed
line_comments = false

Now go ahead and compile your style sheets just as you would normally - your production style sheets will get updated seamlessly whenever something changes.

5 Responses
Add your response

can we use this on non-ruby project?

over 1 year ago ·

If you can use compass you can use this, obviously you need ruby to use compass.

over 1 year ago ·

this doesn't work for me:
semm like compass doesn't find my config_prod file. So the question:

where do the normal config file (config.rb) and the production one (config_prod.rb) have to be saved before compiling called?

How does the file system looks by you?

Thanks in advance

over 1 year ago ·

works great thanks... !!

over 1 year ago ·

I had a further idea using a combination of yours and martin's idea - Sass + Compass compile two different files for development and production environment [Take 3]

over 1 year ago ·