Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development Working with CSS and JS in WordPress Themes Adding CSS to a Theme Via the functions.php File

CJ Williams
CJ Williams
34,372 Points

So, how would we structure our CSS directory and contained files if we were to use sass and the SMACSS architecture?

I am curious about building themes using SMACSS architecture. I really think this would help future-proof the current project I am working on. I've never experimented in a WP theme that uses sass, let alone SMACSS. Is this something that you see becoming a best practice for WP development, or would it be best to stick with basic CSS?

1 Answer

Kevin Korte
Kevin Korte
28,149 Points

Love using Sass with WP. And I'm a little familiar with SMACSS, enough to know you can use it's architecture with Sass, in a WP theme.

The basic structure, is that you have your SMACSS files as Sass partials, and than in one main Sass file, import all of your partials into, to basically generate one nice stylesheet.

How you compile your Sass could make a difference. I tend to use Grunt or Gulp to do so, and both allow me to take Sass file(s), compile them, and save them wherever as a new CSS file with a new name.

For instance my WP theme folder structure might be like (from the root of my theme)

style.css( file )

--dev (folder)

----sass(folder)

--------build.scss (file)

------------partials (folder)

----------------_module.scss (file)

----------------_layout.scss (file)

So with a folder structure like that, I import all of my partials into my build.scss file, compile it to css and save it as style.css in the process, and put it in the root directory. This makes WP happy, and this makes me happy.

Than during theme development, I never touch my style.css file, as it get's regenerated everytime I compile the Sass again.

CJ Williams
CJ Williams
34,372 Points

Thanks Kevin! Is there anything special you need to do the the config.rb file for the wordpress environment?

Kevin Korte
Kevin Korte
28,149 Points

No, I've yet to touch the config.rb file myself. But I have only ever compiled Sass using a Grunt or Gulp plugin to do so....so there may be some custom config if you're using Sass's own compiler. The configs for compiling Sass in Grunt and Gulp are all done in the Gruntfile.js or Gulpfile.js respectively.

CJ Williams
CJ Williams
34,372 Points

OK. I use Compass, so I imagine it's similar. I'll do some Googling to see if there are any special needs for Compass+WP. Thanks again Kevin! Cheers!