TheAmazingWeb.net has come to an end. From now on you will find my Web Development articles on visuelleGedanken.de.

Compass Compiling and WordPress Themes

Chris Coyier:

If you’re a WordPress theme builder and a Sass/Compass user, first, yay you are awesome! Second, there is this little issue that will probably crop up for you regarding compile locations, so let’s solve it now.

I know the problem that Chris is describing, but why not just use the style.css in the css folder instead of the one on the root level of your theme. The latter one can just hold the WordPress comments which are used for defining your Theme name, etc.
The only thing you have to do is put the following in your header.php

Or am I missing something?

Comments

  1. Felix:

    Of course you can, but Chris wants to compile also the style.scss in the theme’s root level.

    The style.css with the theme comment block has to be in the root level to get it recognized by WordPress.

    This two aspects and the inability of SASS compiling in two folders needs the solution Chris provided.

    (Maybe I am getting you wrong :) )

  2. Martin Wolf:

    Yeah, sure. But there is no need to compile the CSS file on the root level of your theme if you just have the WordPress related comment block in it and use it just for defining it as a theme. You don’t need to reference it in your header.php.

    So you can just use your own style.scss -> style.css which lives in a scss/css folder and reference that one in your header.php as I said above.

    Maybe I should make a screencast on that one, seems to be more complicated than I thought.

  3. Felix:

    You are totally right, but Chris wanted to compile the root style.css – I can’t see the real need in this, too! But hey, it’s just a scenario :)

    For the record, I am using the same approach as you do. But for better understanding I am using /style.css for the WordPress comment block and /scss/

  4. Felix:

    Accidentally hit submit :(

    … and /stylesheets/scss/themename.scss for my style sheet. This one gets compiled to /stylesheets/css/themename.css, which gets included in the header.php. Don’t like the idea of having different files with the same file name.

  5. Richard Dale:

    Thanks Martin, as I was reading Chris’ blog post I was thinking, well why are you trying to compile style.css.

  6. coach 2013新作:

    プラダ 小物

  7. Superdry 極度乾燥:

    Chan Luu

  8. アバクロ レディース ロングパンツ:

    アバクロ メンズ Tシャツ

  9. プラダ 財布:

    coach コーチバッグ アウトレット