Last Updated: June 15, 2017
·
6.747K
· martijndevalk

Sass + Compass compile two different files for development and production environment

config.rb

// Syntax
preferred_syntax = :scss

// Paths
http_path = "/"
images_dir = "/img"
javascripts_dir = "/js"
sass_dir = "/css/scss/"
css_dir = "/css/"

if environment == :development
 line_comments = true
 output_style = :nested
 sass_options = {:debug_info => true}
end

if environment == :production
 line_comments = false
 output_style = :compressed
 sass_options = {:debug_info => false}

 require 'fileutils'
 on_stylesheet_saved do |file|
 if File.exists?(file)
 filename = File.basename(file, File.extname(file))
 File.rename(file, "css" + "/" + filename + ".min" + File.extname(file))
 end
 end
end 

watch.bat

START compass watch -c config.rb -e development
START compass watch -c config.rb -e production
EXIT

File structure

<project folder>/ 
 CSS/
 SCSS/
 style.scss
 style.css
 style.min.css
 IMG/
 JS/
 config.rb
 watch.bat

4 Responses
Add your response

This is a great idea! I decided to try and do it a little differently, this is what came out - https://coderwall.com/p/gqqfgw

over 1 year ago ·

for those using Linux, Mac OSX you can make an shell script.
since bash not working at linux and mac osx i'm not sure how. here the sample for sh

!/bin/sh

compass watch -c config.rb -e development

compass watch -c config.rb -e production
exit

over 1 year ago ·

Excellent idea, I will use in my projects, thank you very much for sharing knowledge!

over 1 year ago ·

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

over 1 year ago ·