Adding Compass to an existing Sass project

In the Installing Compass recipe of Chapter 1, Getting Started with Sass, you can read about how to create a new Compass project. In this recipe, you will learn how to add Compass to an existing Sass project.

Getting ready

Of course, you will have to install Compass before using it. Read the Installing Compass recipe of Chapter 1, Getting Started with Sass, to find out how to install Compass. This recipe uses the same SCSS code as was used in the Introspection functions recipe of Chapter 5, Built-in Functions, to demonstrate the cosine trigonometric function.

How to do it...

You can learn how to integrate Compass in a existing Sass project by performing the following steps:

1. Create a file structure like that shown here:

   

2. Write down the following SCSS code into the sass/main.scss file:

    // scss-lint:disable PropertySpelling 
   
   @import "utils/cos"; 
   
   .test { 
     cosine: cosine(1); 
   } 

3. The sass/utils/_cos.scss file should contain the SCSS as follows:

   @function...