SASS Project Structure

[Chester]

How do you structure your SCSS/SASS projects?

I already read [Sass Style Guide](https://css-tricks.com/sass-style-guide/ “”) but still confuse on what to put inside those files.

Like, what’s inside your _screen.scss_ , _base.scss_ , _utilities.scss_ ? These are the most common I’ve seen. The _ screen.scss_ is the file that is compiled to _screen.css_ and is linked at the html.

[Paulie_D]

>The _ screen.scss_ is the file that is compiled to screen.css

Actually, it won’t be compiled to a separate CSS file at all.

You would @import the _ screen.scss into a global .scss file which would then compile to a global.css file and that is the only one you would link in your HTML.

See here: http://thesassway.com/beginner/how-to-structure-a-sass-project

[Chester]

@Pauli_D sorry, that’s supposed to be an italic text only, not a partial file. Thanks for the link.

UPDATE:
Just done reading the link you gave and I’m confuse on the base partial. It contains font styles, yet in their primary stylesheet they also have an @import for typography partial. I don’t understand.
Please make it more clear.

Thank you so much.

[TheDoc]

I do almost the same as well, albeit with different naming scheme. Structure is pretty much the same, though!

[Chester]

OK, things are much clearer now. Thanks everyone.

[Kitty Giraudel]

> I pretty much use the structure suggested by @HugoGiraudel, he is some sort of Sass meister.

This post is old, I don’t work like this anymore. I guess it’s time for a new version. :)

[Chester]

@HugoGiraudel Lol. I just started using your “old” project structure. How do you do it now then? Thanks.

[Kitty Giraudel]

Oh, it’s still good I guess. But I’ve learnt to become more organized as time fly.

My Sass folder is now divided into subfolders :

* *vendors*: contains all things that are not directly from me (Normalize, FontAwesome, libraries…)
* *helpers*: contains config file, variables, mixins, helper classes
* *partials*: contains the actual styles divided into sections (header, footer, base, …)

Regarding the naming, I’m going all [BEM-like](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) now:

.block-element { }
.block-element__child { }
.block-element–modifier { }
.block-element__child–modifier { }

[Here is](https://github.com/HugoGiraudel/hugogiraudel.github.com/tree/master/sass) what it looks like for my own site. Up to date and **fully** commented. :)

[Author]

Posts