Last Updated: June 15, 2017
·
6.603K
· 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 ·