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.
Written by Tsachi Shlidor
Related protips
5 Responses
can we use this on non-ruby project?
If you can use compass you can use this, obviously you need ruby to use compass.
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
works great thanks... !!
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]