Compass Won’t Compress Sass to CSS

Posted on: February 27th, 2013

I love Compass for it’s simplicity and all around effort to make my life easier. I don’t like Compass when it won’t compress Sass to CSS aka the process of taking a bunch of jumbled Sass and converting it to readable styling or minified styling.

To go from verbose, commented sloppiness to nicely compressed/minified CSS, Compass has an incredibly easy command line command. Careful though, there are some things you may not think to do that will block your path to neat and tidy stylesheets. Note: when I say verbose and sloppy, I am referring to your main development settings, which I have set to uncompressed styling with line comments, which can become thousands of lines of CSS.

Getting There

In your project you should have a config.rb somewhere. In it, you most likely have something called ‘output_style’ which can be set to :compressed or :expanded. Those settings adjust the compiled CSS differently. Update: greg5green noted in the comments that you can also use :compact or :nested.

I like to develop with my CSS expanded, making use of a Web Inspector to debug. Expanded with comments shows where in your mixin files the line of styling is coming from. Once I’ve completed the project though, I want it to be compressed.

The first time I compressed my SCSS I ran into issues. I switched the file ‘config.rb’ to say :compressed instead of :expanded, but nothing happened. After checking out the Compass GitHub page, I was surprised with how simple it was and how dumb I was being.

Adjust config.rb

Change your config.rb file to resemble the below lines.

# from 
output_style = :expanded
# to
output_style = :compressed

# I also had line commenting turned on, so I included
line_comments = false

In changing those aspects of your config file you are saying, “HEY, let’s tidy this up. Compact this piece.”

Restart Apache

This sounds dumb and simple, but it took me the most time to figure out. When in doubt, put it out…or something. Restart Apache and continue on.
Note: I thought this was necessary originally, but later on realized all you need to do is compile (see next step) and everything will be fine.

Shake Your Sass

From the command line, cd (change directory) up to your /scss directory. This is the same directory that you are using compass watch to monitor your scss files changing.

Once there, simply input

compass compile

and you should see something similar to the following output.
compress sass to css

What Happened

When you commanded ‘compass compile’ the current style.css file is deleted and replaced with a newly created style.css file, based on your most recent config.rb and style.scss file.

Simple enough and now you have one reallllly long line of CSS, reducing your file size by a good deal (hopefully).

If you have any questions or comments leave them below. I hope to add more about becoming a Sasshole in the future, so feel free to tell me what I should be checking out.

Compass Command Line Documentation: http://compass-style.org/help/tutorials/command-line/

previous post: Remove div and ul from wp_nav_menu next post: Top 10 Albums For Maximum Coding Efficiency Part Deux