Sass Direction

[stephenplusplus]

Here's the current directory structure:

app/styles/sass/
app/styles/sass/components.scss
app/styles/components.css
app/styles/h5bp.css
app/styles/main.css

Having both components.css and the Sass source in app/styles/sass/components.scss is a way to support those who don't wish to use tooling. However, this structure is a bit confusing. I believe it would be clearer to have a structure like:

-app/styles/sass/
+app/styles/components/
app/styles/components.css
app/styles/h5bp.css
app/styles/main.css

The current directory name sass leads me to believe I can't create a sass file in app/styles/, which we should allow.

The build process is currently a little funky, too. gulp watch (which calls gulp styles), simply takes app/styles/sass/components.scss, processes it, and spits it out as dist/styles/components.css. This has two side effects:

1. You have to run a build to see the results of your edits to the component library.
2. You're left with an out-of-date app/styles/components.css hanging around.

Would it be better to take all app/styles/**/*.scss, and spit them out as .css in app/styles/? This way, you can see the result of your edits as you develop, without having to run a build.

The problem I see with this approach is, assuming you had a custom app/styles/module.scss, you would end up with app/styles/module.css as well.

During development using Yeoman generators, we store the compiled .css in a .tmp directory. During the build, the compiled .css is spit out in dist, leaving only the Sass source files in app/styles. How tricky is it to add this functionality in here?

// @addyosmani @sindresorhus @passy

[addyosmani]

I'm +1 on the naming changes. Also +1 on watch changes writing to app/styles. Wondering if this adds any other caveats.