Compass Won’t Compress Sass to CSS

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/

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Gregory Green
7 years ago

1. You’re doing something wrong if your scss is “verbose, commented sloppiness” or “jumbled sass”. It should be beautiful and full of whitespace.
2. You can actually have expanded, nested, compact, or compressed.
3. What does Apache have to do with anything?

johnbhartley
johnbhartley
7 years ago
Reply to  Gregory Green

1. What I was referring to was the setup I use in development: uncompressed, with line_comments, which can be thousands and thousands of lines.
2. Thanks for the tip, will add that in.
3. Had been meaning to update that part, so thanks for pushing me to add a clarification.

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

2
0
Would love your thoughts, please comment.x
()
x