Let's look at the sample project we are working with to see how it all hangs together. In this book, I focused on the SCSS variant of 320 and Up, so I will continue using the same through this appendix. For the most part, LESS is similar but has some syntactic differences. I will point out a few key examples along the way.

Let's look at the before project file from Chapter 2, Building the Home Page. Take a peek inside the 320andup directory and look at the file structure for the moment. The main things I want to focus on are the css directory and the scss directory. The other siblings such as less, sass-compass, sass, and scss-compass hold the code to skin this cat in a different way.

Moving on to the scss folder, you will notice the file 320andup-scss.scss and a bunch of files with underscores in front of them. The files with the underscores in front of them, for example, _1382.scss, are called partials. The underscore lets the preprocessor know not to turn these individual files into CSS. But they will have to get processed eventually though, right? That happens after they get imported to the one and only file that doesn't have an underscore in front of it. (LESS, on the other hand, does not use this underscore convention. For me, this is another small advantage I give to Sass. With Sass, I can make a quick visual scan of the file tree and know which files are partials and which aren't.)

Using the 320andup-scss.scss file as an example, think of this file as the mother ship. All the other little ships dock there and unload their cargo. Once it's all there, things begin to happen. To be specific, CSS happens.

To learn how this comes together, let's look at the mother ship—320andup-scss.scss.

You will notice that the file is just a nice clean file that orders imports. Notice that the partials don't have the underscore in front of them in the import statements. Also, the ordering is important as, for example, you want to define all your variables and mixins before you try to use them. The other imports are placed inside the @media queries so that those files preceded by underscores (partials) are only used inside those queries.

What's so great about this? It keeps your code super tidy—easy to work with and maintain. This is the benefit of the 320 and Up framework. It takes care of the busy work of organizing all of this.

Lastly, I want to list some resources for you to check out to learn more about the CSS preprocessors and their helpers. Enjoy!