One of the many beauties of working with Sass is how easy it is to get organized. In the past, importing different CSS files wasn’t good practice and in fact made for more HTTP requests. With Sass, you can have many different partials which allow you to isolate styles in a logical way.
What is a partial? The Sass Documentation explains it pretty well:
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file.
Organizing Sass files in this way, then allows you to create a sort of “table of contents” with a global.scss. I create about 13 partials; one for forms, icons, type, mixins, images, etc. Each partial has only the styles that belong, making styles easily findable.
stylesheets/
_bits.scss
_forms.scss
_icons.scss
_images.scss
_mixins.scss
_type.scssOnce you’ve created your files, you then import them into your master stylesheet. I like putting comments to remember what each partial is doing.
/*
VARIABLES
---------------
Setting up variables. Bringing in Colors and Spacing.
--------------- */
@import "bits";
/*
BASE STYLES
---------------
Setting up the base. Bringing in Type, Images, Forms, and Icons.
--------------- */
@import "type";
@import "images";
@import "forms";
@import "icons";Organizing yourself like this can be difficult to adopt at first, but I can’t tell you how much time I’ve saved. On large projects, knowing where to look is half the battle. Gone are the days of 3000 line stylesheets. Instead we can work in small, specific, and more importantly, manageable files.
