Files structure

The most important thing when you are starting a project is to make a good plan of its process. First, you will need to separate settings:

Then you will need to partialize your project. You will need to create files for repeatable elements along all sites:

Then you will need to prepare next partialization—specific views of styling and elements, for example:

How to keep variables in a project

What can you keep in variables? Yeah, that is a good question, for sure:

How and where to keep mixins (local and global)

In this file, you can collect your mostly used mixins. I've divided it into local and global. In global mixins, I'm gathering the most used mixins I'm using along all projects.

In local mixins, I recommend to gather those mixins that you will use only in this project:

Keep typography styles in a separate file

This file is dedicated for all the most important text elements:

Additionally, you can add classes like the following:

Why should you use classes like .h1-.h6?

Yeah, it's a pretty obvious question. Sometimes you cannot repeat h1-h6 elements, but, for example, on a blog, you need to make them the same font style as h1. This is the best usage of this style, for example (HTML structure):

<h1> Main title</h1>
<h2>Subtitle</h2>
<p>... Text block ... </p>

<h2>Second subtitle</h2>
<p>... Text block ... </p>

<p class="h2">Something important</p>
<p>... Text block ... </p>

<p class="h1">Something important</p>
<p>... Text block ... </p>

Views of specific elements

In the following listed files, you can gather all elements that are visible in some specific views. For example, in a blog structure, you can have a view of single post or page view. So you need to create files:

_view_singlepost.sass
_view_singlepage.sass
_view_contactpage.sass