The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SASS Project Structure

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #46526

    How do you structure your SCSS/SASS projects?

    I already read [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.


    >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:


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

    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.


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


    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. :)


    @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]( now:

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

    [Here is]( what it looks like for my own site. Up to date and **fully** commented. :)

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.