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:
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.scss
Once 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.