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

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.