CJ Williams33,033 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?
Kevin Korte28,077 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 )
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.