SASS Series

Learning SASS – Part 1: File Structure and Imports

Posted on by

Switching your workflow over to SASS can be an intimidating thing to do. New things can be scary, but I promise, once you start down the sassy road, ¬†you’ll never look back. I’m going to put out a series that will get you started using SASS in simple steps. I’m not entirely sure how many parts there will be just yet, but this is part 1 of the series just going over basic file structures and using imports to keep your SASS files organized and manageable.

Choosing Your Compiler

If you don’t already have a program downloaded to compile your SASS, you will want to do that. If you aren’t sure how to do so, I’ve written an article on how to get started with Prepros. You can check that out, or you can check out some of these other compilers.

These are just a few that I would recommend, there are more out there.

Setting Up Your Files

Now that you’re all set up with your compiler, it’s time to get your file structure started. To start, you’ll want to make your project folder and include at least 2 more folders within it, a “scss” folder (for SASS files) and a css folder (for your SASS to compile to). Next, you need to open up your text editor of choice, mine is Sublime, and create your html page, styles.scss, and styles.css files.

You don’t have to name your files styles.scss, that’s just what I do, you can name them whatever you like, as long as your main SASS file and CSS file have the same name. Here is my text editor and file structure up to this point…

file-structure

Testing Your Setup

Once I get to this point, I have my project setup in my compiler and basic file structure set up. Then, I like to test to make sure it’s working. Now, in your HTML file, you will be linking to your CSS stylesheet, not your SCSS stylesheet. That’s what the compiler is for, whenever you edit your styles.scss file, it compiles it in to your styles.css file. So, I like to just do something really basic and quick to test if everything is good to go. In my styles.scss, I’ll do something like…

SCSS


body { 
  background:red;
}

Then, I’ll open up my HTML file and see if my background is red. If so, I’m ready to get going. If not, you’re maybe getting an error message or it’s just not changing, you’ll need to go in to your compiler program and make sure everything is set up correctly.

Using Imports

There’s only one reason we use @import (hopefully), and that’s to keep our code more organized and parts separated to be easier to manage. The issue with @import is, the more you have, the more http requests there are and the more files you have to upload to your CSS folder. SASS takes imports up a notch and makes them even more awesome. With SASS, it allows you to use as many imports as you want, but still compile it all to the one css file. This allows you to keep your code more separated and organized without suffering the consequence of more http requests.

Now, there’s a little trick to this. When you create a new .scss file you want to import, you need to put an underscore before it. This tells your compiler that it should be compiled in to the original styles.css file and not work like the old fashioned CSS imports.

Personally, I like to keep my files as separated as possible. Every project is different, but there are a few import files I usually start out with right away that almost every project will use. I’ll typically go will something like…

  • _variables.scss
  • _reset.scss
  • _nav.scss
  • _typography.scss
  • _forms.scss

If you’re going to have a separate file for you variables/mixins, which I recommend, you’ll want to include that import first so that way any of the variables and mixins are declared before you actually try to use them later in the stylesheet.

You could easily add in more files based off what kind of elements you’ll be needing in your site. I’ve found structuring my files this way has lead to much easier maintainability and you know exactly where you need to go instead of using a search tool on a massively long CSS files.

Finally, you’ll want to import all of these files in to your styles.scss, so anytime you edit one of them, they get compiled. To import, you’ll use the following code..

SCSS


@import "typography";

At this point, our file structure has grown a bit and now looking like this..

file-structure2

Wrap Up

Up to this point, we have our project started and all of our files ready to go to really start getting to the coding part. I really believe this beginning stage is just as important as any. It’s important to stay structured and organized from the start in order to keep your project that way throughout the process. You don’t want to get lazy and let it all fall apart and make it super tough to manage down the road.

In the next part, I will cover nesting and how to properly use it. Trust me, it will make your life much better.

Leave a Reply