Folder-File Structure

Sometimes it is challenging to write all the code in one file. Sass allows split the code into different files and folders. It simplifies the support and code refactoring.

sass folder

Our first task is to create the sass folder in the project root. This way we let the compiler know that we use sass in the project.

sass folder organization

In the sass folder:

1. We create the main.scss file. It is the main file for the compiler. We will connect all fragments to this file with the help of the @import directive;
2. We create different folders for the sass partials. (e.g., the utilities folder for variables, the components folder for the repeating styles of some elements, the base folder for the global styles and resetting default element behavior, and the layouts folder for not repeating styles).

partials

Now, we are ready to add files and write some sass code to give the styles to the elements. To keep the structure, we create one file for each feature. The file name must start with the underscore (_). For the compiler, it means that it is not the main file. It is partial.

All structure is ready. We can import all the files to the main.scss file with the help of the @import directive. The order is essential. For example, if we would like to use some variables from the _variables.scss file in the _button.scss file, then we have to keep the _variables.scss file import higher than the _button.scss file import inside of the main.scss file.

The syntax for importing the file is the following. We use @import, and double quotes ("") to specify the correct path to the file.

The result content in the main.scss file is following:

Note

We have considered the basics of the sass preprocessor that allows us to use it for projects. However, any preprocessor has a vast amount of different features. To cover all of them is different from the plot of this course.