//

STRUCTURE YOUR SASS

STRUCTURE YOUR SASS

Sass enables your you to separate your stylesheets into individual files, and then you can use the @import directive to include your individual files into one master stylesheet.

Let's look into how you can structure your individual files.

Basic directory structure

In your sass folder, you can layout the files as follows:

1tree
2sass/
3|
4|-- modules/ # Common modules
5| |-- _all.scss # Include to get all modules
6| |-- _utility.scss # Module name
7| |-- _colors.scss # Etc...
8| ...
9|
10|-- partials/ # Partials
11| |-- _base.sass # imports for all mixins + global project variables
12| |-- _buttons.scss # buttons
13| |-- _figures.scss # figures
14| |-- _grids.scss # grids
15| |-- _typography.scss # typography
16| |-- _reset.scss # reset
17| ...
18|
19|-- vendor/ # CSS or Sass from other projects
20| |-- _colorpicker.scss
21| |-- _jquery.ui.core.scss
22| ...
23|
24|-- main.scss # primary Sass file

Primary stylesheet

This allows you to keep your primary Sass file (main.scss in this example) extremely clean:

1// Modules and Variables
2@import "partials/base";
3
4// Partials
5@import "partials/reset";
6@import "partials/typography";
7@import "partials/buttons";
8@import "partials/figures";
9@import "partials/grids";
10// ...
11
12// Third-party
13@import "vendor/colorpicker";
14@import "vendor/jquery.ui.core";

Modules, partials, and vendor

As you can see this divides your project into three basic types of files. Modules, partials, and vendored stylesheets.

  • The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.
  • The partials directory is where the meat of your CSS is constructed. A lot of people would like to break their stylesheets into header, content, sidebar, and footer components (and a few others). But ideally you should break things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).
  • The vendor directory is for third-party CSS. This is handy when using prepackaged components developed by other people (or for your own components that are maintained in another project). jQuery UI and a color picker are examples of CSS that you might want to place in the vendor directory. As a general rule it's better to make it a point not to modify files in your vendor directory. If you need to make modifications, add those after the vendored files. This should make it easy for you to update your third-party stylesheets to more current versions in the future.

Using a base partial

In the partials directory you will also notice that there is a base partial. The purpose of this partial is to load up Sass environment so that it's easy to construct a stylesheet. It might look something like this:

1// Use Compass ('cause it rocks!)
2@import "compass";
3
4// Font weights
5$light: 100;
6$regular: 400;
7$bold: 600;
8
9// Base Font
10$base-font-family: sans-serif;
11$base-font-weight: $regular;
12$base-font-size: 13px;
13$base-line-height: 1.4;
14
15// Fixed Font
16$fixed-font-family: monospace;
17$fixed-font-size: 85%;
18$fixed-line-height: $base-line-height;
19
20// Headings
21$header-font-weight: $bold;
22
23@import "modules/all";

The base stylesheet sets a couple of global variables and loads up all of Sass modules. Again modules are not allowed to contain anything that would cause CSS output when importing. Tying all of your varibles and modules up into a base partial gives the access to your entire Sass environment whenever you are setting up a new stylesheet with a single import statement. This allows you to build multiple stylesheets by importing different partials. Multiple stylesheets are handy once a project grows to a certain size.

One step further

You can take this pattern one step further. Since we have multiple sub-projects all bundled together in a single app, we bundle each sub-project into a separate top-level directory. Our stylesheet directory looks more like this:

1tree
2sass/
3|
4|-- admin/ # Admin sub-project
5| |-- modules/
6| |-- partials/
7| |-- _base.scss
8|
9|-- account/ # Account sub-project
10| |-- modules/
11| |-- partials/
12| |-- _base.scss
13|
14|-- site/ # Site sub-project
15| |-- modules/
16| |-- partials/
17| |-- _base.scss
18|
19|-- vendor/ # CSS or Sass from other projects
20| |-- _colorpicker-1.1.scss
21| |-- _jquery.ui.core-1.9.1.scss
22| ...
23|
24|-- admin.scss # Primary stylesheets for each project
25|-- account.scss
26|-- site.scss

As you can see each sub-project has it's own primary stylesheet, modules, partials, and base. Vendored stylesheets are typically versioned and have their own top-level directory. This is a handy pattern to use on very large Sass projects.