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 trialCJ Williams
34,372 PointsSo, 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
28,149 PointsLove 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
34,372 PointsCJ Williams
34,372 PointsThanks Kevin! Is there anything special you need to do the the config.rb file for the wordpress environment?
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsNo, 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
34,372 PointsCJ Williams
34,372 PointsOK. 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!