Forums

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
    Posts
  • #46526
    Chester
    Participant

    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.

    #143485
    Paulie_D
    Member

    >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

    #143494
    Chester
    Participant

    @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.

    #143498
    TheDoc
    Member

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

    #143503
    Chester
    Participant

    OK, things are much clearer now. Thanks everyone.

    #143574
    Kitty Giraudel
    Participant

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

    #143578
    Chester
    Participant

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

    #143667
    Kitty Giraudel
    Participant

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

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