How I structure SCSS files

In this tutorial, I’ll show how I structure my SCSS projects. By SCSS projects I mean any project that uses SCSS. The structure and examples from this article can also be applied for the SASS (Syntactically Awesome StyleSheets) projects.

I use SCSS because I prefer the syntax, which is very similar to CSS.

So, how do I structure my SCSS projects?

I have multiple .scss files (partials) that represent different site sections or logic. These files begin with a leading underscore _partial.scss.

Then, there’s a main.scss file, which contains main styles. All the partials are imported into the main.scss file using the @import directive.

Basic structure

// main.scss
@import 'fonts';
@import 'mixins';
@import 'typography';
@import 'animation';
@import 'forms';
@import 'products';

body {
  color: #333;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  padding-top: 70px;
}

// ...

@import 'responsive';

Note that you don’t need to include underscores and file endings when you import partials.

In large projects having a well-structured CSS/SCSS is vital. Instead of putting all our styles in a single file (Shopify are still doing that and I hate them for this) we split them into smaller chunks.

I usually have more partials than in the example above. But you can add them according to your site structure and needs.

Watch and compile SCSS

When you start building a new website it’s important to configure auto-compiling of your main.scss file into CSS. There are many ways you can do that: using gulp, node.js, apps etc.

Once set up, the script or an app will watch for any .scss changes and automatically compile SCSS into a single CSS file that is used on your website.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/scss-simple-structure

PS: Make sure you check other CSS tutorials, e.g. CSS3 properties that no longer need browser -prefixes- and CSS position fixed not working [solved].