Using Sass compressed output while leaving theme comment header for Wordpress

Question

How do other Wordpress theme developers incorporate Sass into their theme development while taking advantage of its compressed output style? Sass compressed removes ALL comments, so I currently have an empty style.css with my theme declaration and an @import calling the minified css from compass, but this hardly seems like the best solution.

Has anybody found a way around this? What would be the best solution if not?

http://codex.wordpress.org/Theme_Development#Theme_Stylesheet

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id40

Answer 1

SUPER SHORT VERSION: Use /*! loud comments */ and compile the SCSS just before packaging and distributing.

Two part answer, "old part" first:

I used Sass/SCSS when developing my "Orin" theme: https://github.com/founddrama/orin

Part One:

• In my src/scss directory, I keep all of my _include.scss files and the style.scss file that has all of the @import statements.
• During development, I just run the usual sass --watch (although it's an extra step to remember to save the style.scss file).
• Once your SCSS source is looking good and committed to version control, you can simply build the style.scss into style.css and check that into version control for the Theme that gets distributed.

In my case, "Orin" is just for me, so I perform the build when I update it on the blog server, but the SCSS compilation can just as easily be done prior to packaging/distribution. The build script I'm using is here (in that Github repo); the gist of it being:

1. touch to create the style.css output file;
2. apply the license text;
3. compile the SCSS and append it to style.css.

Part Two:

More recent versions of Sass include support for /*! loud comments */; meaning that I need to get off my lazy butt and update to:

1. Include the license text and theme description right there in style.scss using the loud comments;
2. update the build/deploy script to simply compile the SCSS.

Answer 2

Well, i would suggest you to use Compass . The comment should look like this:

/*! A loud SASS comment */