MikeScriber

How to manage and organize your Sass files

Posted by Mike Scriber on Friday, February 22, 2008

First of all when it comes to organization of your Sass, it's a good idea to have a solid framework laid out. Once you have a framework laid out you can re-use this for your other projects. I like to use this basic framework:

1. base.sass


2. structure.sass


3. styles.sass


4. forms.sass


5. variables.sass - This can be it's own file or in base.sass depending on how many variables you will have.

You can add files to this as well if you feel it's necessary, but this is a great start to Sass organization. When it comes to calling all these files I usually import them into the base.sass file at the bottom. The reason for this is because Sass will write the imports above all your base styles. This brings me to the import feature.

Import is very useful. This is making your Sass more modular and when it comes to adding or even removing a Sass file all you need to do is open your base.sass file and add/remove it. One other thing to mention is when it comes to debugging it makes things easier.

Moving on to commenting. When you're commenting your Sass file you have two options. The first option is "silent comments", which don't output anything to your CSS file, hence "silent comments". Below is an example of "silent comments".

                  // This is a silent comment
                  

The second option is "loud comments". These will output to your CSS files. See example below.

                  /* This is a silent comment
                  

When it comes to property organization I like to organize them alphabetically. The main reason why I like doing this is because I never have duplicated properties and I always know where to find that specific property because it's in the same spot every time. If you take anything from this article I hope this is it.

Lastly lets talk about breaking your Sass into sections. This is a very important point as well. By dividing your Sass into specific sections it makes it easier to modify down the road. It also helps to get to the section you’re looking for faster. See example below.

                  // Header
                  // Navigation
                  // Footer
                  

Enjoy and Happy Sass'ing

• Tags:
• Sass
• Comments (1)

Comments

Add Comment