Make CSS files be slightly-modified compiled versions of the Sass files

Thanks for noticing that, Elly!

Ok. So I originally thought we could "easily" keep track of changes made to the Sass files and copy them to the CSS files.

But I can see it is too easy to let the CSS code base drift from the Sass code base. :-(

I remember that Chris Epstein pointed out that /* */ comments get stripped out when using output_style = :compressed on production sites, but not when output_style = :expanded or :nested or :compact on development sites.

So I did an experiment. What if we converted our Sass comments back to /* */ ones and then compile them with output_style = :expanded and save those CSS files in our git repository?

This is what I discovered:

1. Some of the blank lines for readability were stripped out and would need to be put back.
2. Some inline comments were about the Sass mixins and need to be re-written to be CSS specific.
3. Some extra CSS-only comments are still needed because our Sass mixins transparently fix some CSS problems.
4. The stuff in #1-3 are already committed in our CSS files. So… After we compile the CSS files, we can do a git diff and relatively easily restore items #1-3 before committing the newly compiled CSS.
5. BONUS #1: I discovered some errors with my Sass because it forced me to look at the compiled CSS.
6. BONUS #2: I discovered some errors with my CSS because Sass compiled to non-broken CSS.

So, I think we should go ahead and make the CSS files be slightly-modified compiled versions of the Sass files.

Fixed. http://drupalcode.org/project/zen.git/commitdiff/fb41a5d?hp=8d71f64196af...

The SASS doesn't want to compile to the current CSS.

For example currently in blocks.css there is this:

/**
 * @file
 * Block Styling
 */


.block { /* Block wrapper */
  margin-bottom: 1.5em;
}

However with :expanded the SASS becomes:

/**
 * @file
 * Block Styling
 */
.block {
  /* Block wrapper */
  margin-bottom: 1.5em;
}

With :nested the SASS becomes:

/**
 * @file
 * Block Styling
 */
.block {
  /* Block wrapper */
  margin-bottom: 1.5em; }

With :compact the SASS becomes:

/** @file Block Styling */
.block { /* Block wrapper */ margin-bottom: 1.5em; }

With :compressed the SASS becomes:

.block{margin-bottom:1.5em}

As you can see none of these are identical to the current CSS.

Yep. Re-read my comment in #1 above. In particular the last line:

…make the CSS files be slightly-modified compiled versions of the Sass files.

The only reason why I go through this trouble is I would like people to use Zen even if they aren't yet ready to make the Sass plunge.

BTW, I also turn on IE6 and IE7 support before I compile the CSS. But then leave those variables off for the Sass files.

BTW, I also turn on IE6 and IE7 support before I compile the CSS. But then leave those variables off for the Sass files.

Yes, I did notice this :)

I guess this is by design then. In which case perhaps you could confirm which of the following is true. Current CSS is almost the same as :expanded so did you:
a) Manually go through and remove the extra line breaks for comments
b) Set extra sass options or use a different environment value that I have been unable to determine that adds additional whitespace

If (b) could you share the additional knowledge please.