Importing and organizing your files

In the Working with partials recipe of Chapter 1, Getting Started with Sass, you can read about the @import directive in Sass. The @import directive enables you to have as many files as you want in your development environment and this will compile to a single file in production. When your project grows, the number of files will also grow. In this recipe, you will learn how to use and organize these files.

Getting ready

In this recipe, you only will compile a single Sass template into CSS code to demonstrate the use of the @import directive. You can compile this template by using the Ruby Sass compiler. Read the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, to find out how to install Ruby Sass.

How to do it...

The following steps will learn you how to import files and organize your files:

1. Create a Sass template called imports.scss. The imports.scss file should contain the following lines of SCSS code:

   @import 'file...