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

<link href="<?php bloginfo('template_url'); ?>/css/style.css" type="text/css" rel="stylesheet">

Or am I missing something?


  1. Felix

    Monday, 15 October 2012 at 11:16

    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

    Monday, 15 October 2012 at 11:27

    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

    Monday, 15 October 2012 at 11:36

    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

    Monday, 15 October 2012 at 11:39

    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

    Saturday, 9 February 2013 at 09:41

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

  6. coach 2013新作

    Saturday, 10 August 2013 at 14:01

    プラダ 小物

  7. Superdry 極度乾燥

    Tuesday, 13 August 2013 at 15:17

    Chan Luu

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

    Tuesday, 13 August 2013 at 19:08

    アバクロ メンズ Tシャツ

  9. プラダ 財布

    Monday, 19 August 2013 at 09:05

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