Using Sass compressed output while leaving theme comment header for Wordpress

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?


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:

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.

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

/*! A loud SASS comment */

Need Your Help

Are jQuery's hide and slideUp methods equivalent?

jquery hide show slidedown slideup

Do slideUp('slow') and hide('slow') result in the same animation effects?

What is a closure? Does java have closures?

java javascript closures

I was reading Object Oriented Javascript and found the concept of closures. I didn't quite understand why and when it is used. Do other languages like Java also have closures? I basically want to