Combining SCSS files - Tips & tricks for structuring

Do you want to organize and efficiently combine your CSS-files? Sass offers you the possibility to import and combine various SCSS files. In this guide, I will show you how to do that and what to pay attention to.

Key Insights

• Import SCSS files with @import to combine them in a central file.
• Use a leading underscore (_) in the filename to prevent a separate CSS file from being generated.
• A central control file helps keep your Sass code organized.

Step-by-Step Guide

First, clarify which syntax you want to use. Sass has two syntax options: the classic Sass syntax and the SCSS syntax. I recommend the SCSS syntax as it offers you more flexibility, especially if you want to use existing CSS without having to adapt it.

Now it's time to open your project directory. Create your SCSS files in a well-organized directory. You can have multiple SCSS files, each dealing with different styling aspects of your website.

Assuming you have already created several SCSS files. You now need to consider how you want to import these files. Use the @import statement to import the SCSS files into a main file, such as app.scss.

To create the import statement, simply enter @import 'your_file'; in your main file. If you do not want to use CSS suffixes, you can omit them. This makes it clearer and easier to manage the files.

One especially practical trick is to use a leading underscore in the filename. For example, if you create a file named _fong.scss, it will not be output as a separate CSS file. This makes file management in your project easier by avoiding unnecessary CSS files.

Now you can take a look at your main SCSS file. You will not see the imported file as a separate CSS file, which keeps your output tidy. This means you can simply manage your styles in one file.

Create a central control file. Name it app.scss, for example. This control file will contain the import statements for all your SCSS files. This way, you will have a good overview of the entire styling of your project.

If you use subdirectories, be aware that you must specify the directory name in the import statement. This allows you to keep the structure of your project clear and organized.

The order of imports is crucial. Later style elements override earlier ones. Make sure to import them in the desired order to avoid unwanted overrides.

Once everything is in place and you have cleanly integrated the SCSS files into your main file, you can compile the project and check the CSS file. You will see that all of your styles are applied in one and at the same time, minimizing the number of HTTP requests.

Summary

By using @import in conjunction with تنظيق (underscore) in the filename, you can effectively combine SCSS files and increase the clarity of your stylesheet. A central control file also provides a clear structure.