Making wordpress themes in SASS

17 of Sep, 2012

Using SASS is great and provides lots of speed benefits for using preprocessors one thing is does do is removes comments by defaults when you compile a compress document.
This is great for file size until you need to make a wordpress theme that requires CSS comments to work.

Instead of using a CSS import with the @import in your CSS file you can save the extra http request with loud comments in sass.

/* This comment gets removed from sass compressed. */
Theme Name: ThemeName
Theme URI:
Description: This is how you implement loud comments so that wordpress continues to work
Version: 1.0
Author: James Nowland
Author URI:

@import "compass/reset";
@import "screen/functions";

4 Responses to Making wordpress themes in SASS

  1. confused, does this mean you don’t have a style.css file instead you have a style.scss file that imports everything? Does WordPress allow that?

    The way I’m doing it now is having a blank style.css file with the comment block then using enqueue style to bring in the compiled SASS, is there any advantage of this method?

    • Hey Brent,
      The style.scss gets compiled into a style.css file

      It also compiles all the linked files into the one style.CSS file. This saves on HTTP requests and makes the site load faster.

      Compared to the way you are currently doing it saves 1 HTTP request. it is micro optimisation but still easy to implement.

  2. I’m convinced, making the switch :D

  3. Great tip regarding loud comments, I definitely didn’t know this one. However I’ve recently discovered that you can skip this step altogether by declaring the site stylesheet via the functions.php file.

    function style_enqueuer() {
    wp_enqueue_style( ‘screen’, get_template_directory_uri().’/css/compiled/screen.css’, ”, ’2013-00-00′, ‘screen’);
    add_action( ‘wp_enqueue_scripts’, ‘style_enqueuer’ );


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>