How to Output Compressed CSS from Compass

How do I output compressed CSS from Compass?

In your config.rb file:

output_style = :compressed

More at http://compass-style.org/help/documentation/configuration-reference/.

How to generate single minify file of css using Compass?

Minifying with Sass

In the command line, enter the following:

$ sass --watch style.scss:style.css --style compressed

Minifying with Compass

First, make sure you’ve setup your project in Compass by entering the following in the command line:

$ compass create path/to/your_project

Afterwards, you’ll notice that Compass has created two folders in your project directory; /sass/ and /stylesheets/. It has also created a config.rb file.

Open the config.rb file and you should see something that looks a little like the following:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed # :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

In your config.rb file, Line 11 will likely be commented out with the # sign. Uncomment the output_style line so that it reads like the example above.

Finally, you’ll want to get Compass to start watching for changes to your scss files. In the command line, enter:

$ cd /path/to/your_project
$ compass watch

And finish!

---

Credits

Compass output_style

The output styles are covered in SASS documentation.

Although the default CSS style that Sass outputs is very nice and
reflects the structure of the document, tastes and needs vary and so
Sass supports several other styles.

Sass allows you to choose between four different output styles by
setting the :style option or using the --style command-line flag.

:nested

Nested style is the default Sass style, because it reflects the
structure of the CSS styles and the HTML document they’re styling.
Each property has its own line, but the indentation isn’t constant.
Each rule is indented based on how deeply it’s nested. For example:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

Nested style is very useful when looking at large CSS files: it allows
you to easily grasp the structure of the file without actually reading
anything.

:expanded

Expanded is a more typical human-made CSS style, with each property
and rule taking up one line. Properties are indented within the rules,
but the rules aren’t indented in any special way. For example:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

Compact style takes up less space than Nested or Expanded. It also
draws the focus more to the selectors than to their properties. Each
CSS rule takes up only one line, with every property defined on that
line. Nested rules are placed next to each other with no newline,
while separate groups of rules have newlines between them. For
example:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed

Compressed style takes up the minimum amount of space possible, having
no whitespace except that necessary to separate selectors and a
newline at the end of the file. It also includes some other minor
compressions, such as choosing the smallest representation for colors.
It’s not meant to be human-readable. For example:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Compass, config.rb and getting the output actually :compressed

The config.rb is only read when the compass command is run. If you're using compass watch, you will need to stop and start it before the changes will take effect. You may also need to force it to recompile by making a minor change to one of your Sass files.

Is it possible to have Compass generate both expanded and compressed CSS files?

This seems like somewhat of a deficiency in Compass. Is this really an uncommon thing to do? Regardless, here's what I went with. Let's say that the folder structure is like this:

Rakefile
/foo
    /resources
        /css
            /debug
        /sass
            foo-all.scss

And then in the Rakefile, to generate both compressed and expanded version, I do this:

Dir.chdir "foo/resources/sass" do
    # Compile both expanded and compressed variations
    debugdir = File.join(File.dirname(__FILE__), 'foo/resources/css/debug')

    sh "compass compile --output-style compressed --force"
    sh "compass compile --output-style expanded --force --css-dir #{debugdir}"
    mv "../css/debug/foo-all.css", "../css/foo-all-debug.css"
end

In essence, I generate the compressed CSS file in a separate /debug directory, and then move it up to the /css directory, to preserve URL paths in the CSS file. The debudir shenanigans are necessary because Compass seems to require an absolute path when using the -css-dir switch (on Windows, anyway).

Prepend comment to SASS/Compass output

compressed strips out all comments. I suggest you put this in a property:

warning { do-not: "edit this file"; }

Regarding the proposed patch, I do not think this use case is compelling enough to warrant such a feature.

SASS/Compass is missing one entry in @each when using compressed output

Not sure if it's a bug, but it seems odd to me. I can replicate that here with v 3.2.3 if I set the style to compressed. Oddly, shortening it to yello works fine. A workaround is to quote them:

$colors: "red" #f00, "yellow" #ff0, "green" #0f0, "blue" #00f;

That generates:

.box-red>header{background:red}.box-yellow>header{background:#ff0}.box-green>header{background:lime}.box-blue>header{background:blue}

And now that I look at the output again, a pattern emerges: The other colors generate a color name rather than a hex value.

compass removes css comments in compiled css

Compass basically uses the SASS settings for comments and output style which are documented here

Basically, it should leave in your block comments, but need to make sure you're not using the compressed output style, otherwise everything will be removed anyway.

If you're not using compressed and your block comments are still being removed, it might be because they're still declared in-line (I'm not sure what behaviour compass has in that regard). Try moving them to the line before like this:

/*!YUI compressor*/
@media all and (max-width: 480px) {}

The line_comments option just outputs comments before each selector saying where that rule is defined in your SCSS file (as long as your not using compressed) , it was useful before compass supported source-maps

Sass/Compass compile into many locations

I wrote a simple shell script to compile to a given path:

echo "* Compiling all CSS"

echo "***** START";
cd /mainworkspace/www/

echo "***** compiling into skin1";
compass compile --time --css-dir=skin1/main/css --output-style compressed --force;

echo "***** compiling into skin2";
compass compile --time --css-dir=skin2/main/css --output-style compressed --force;

echo "***** compiling into uc skin";
compass compile --time --css-dir=uc/main/css --output-style compressed --force;

echo "***** END";

update:
added some params for production. Here you can find many other optional params: http://compass-style.org/help/documentation/configuration-reference/

---

Related Topics