Before we go any further, we need to make a few updates to our blog project to set it up for Sass. Head to your project directory and navigate to the CSS directory. In this directory, create a new file called custom.scss.

What we're doing here is creating a custom style sheet that we are going to use to overwrite some of the default Bootstrap look-and-feel CSS. To do this, we need to load this custom file after the Bootstrap framework CSS file in our layout file. Open up _layout.ejs in the root of the project directory and insert the following line of code after bootstrap.min.css. Both lines together should look like this:

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/custom.css"> 

Note here that I'm using the .css file extension for custom.css. This is because, after the files are compiled, the template will be looking for the actual CSS file, not the Sass file. The critical part is just that the actual filenames match and that you use .css in the layout file. Before we go any further, let's test out our Sass file to make sure it is set up properly. Open up custom.scss in your text editor and add the following code:

body { 
   background: red; 
} 

This is just a simple way to make sure that Sass is compiling to CSS and is being inserted into our layout. Compile your project and launch the server. If you've done everything correctly the background for your homepage should be red and look like this:

Hopefully this is what you're seeing and you can confirm you've set up your file correctly. Once you've successfully done this, delete the CSS we entered in the Sass file.

Now that you've finished setting up your files, let's start to learn a little bit more about using Sass in your project.

In Sass, variables are called by using the $ sign character. If you're familiar with Less, the @ symbol is used for variables. So in that case, all you would need to do is use $ instead of @. To write a variable, start with the $ sign and then insert a descriptive keyword that can be anything you like. Here are a few examples of generic variable names:

$background-color 
$text-size 
$font-face 
$margin 

I've named these pretty generically and they actually match some CSS property names. This is a good idea and they are easy to reuse and make sense of if multiple developers are working on the same project. However, like I said, you can name your variables whatever you want. If you'd like to get more creative, you could name variables like this:

$matts-best-color 
$awesome-background-color 
$fantastic-font-face 

These are extreme examples and it is advisable not to name your variables in this way. To you $awesome-background-color might mean red but to another person it could mean anything. It's always a good idea to name your variables in a descriptive manner that makes sense.

I've shown you how to write the variable name but the other side of the equation is the actual value for the variable. Let's add in some sample values for our first set of variable names:

$background-color: #fff; 
$text-size: 16px; 
$font-face: helvetica, sans-serif; 
$margin: 1em; 

You write Sass variables the same way that you would write CSS properties. It's also worth noting that you should enter your variables at the very top of your style sheet so that they can be used in all of the CSS you write after them.

Now that we've written some variables, let's actually insert them into some CSS. After the variables in custom.scss, enter the following code:

body { 
   background: $background-color; 
   font-size: $text-size; 
   font-family: $font-face; 
   margin: $margin; 
} 

So instead of using actual values for our CSS properties, we're using the variable names that we set up. This starts to get more powerful as we add more CSS. Let's reuse some of these variables:

body { 
   background: $background-color; 
   font-size: $text-size; 
   font-family: $font-face; 
   margin: $margin; 
} 
 
h1 { 
   font-size: 36px; 
   font-family: georgia, serif; 
} 
 
h2 { 
   font-size: $text-size; 
   font-family: $font-face; 
} 

In this example, you can see a few things going on that I should explain:

As your style sheet grows longer, I'm sure you'll see the value in this strategy. For example, if I decide I want to change my font-size to 24px, all I need to do is change the value for the $text-size variable to 24px. I don't have to go through my entire style sheet and change all the values individually. These are just the basics of what you can do with variables. Let's look at a more advanced use case.

That might sound like a bit of a mouthful, but you can actually use a variable as the default value for another variable. A good example of where you might want to do this is when you are defining a color palette. You can switch the hex values to readable names and then use them for your other variables. This is much easier to scan and understand when you are debugging your code. Here's an example of what I mean:

$black: #000; 
$white: #fff; 
$red: #c00; 
 
$background-color: $white; 
$text-color: $black; 
$link-color: $red; 

Let me break down what is happening here for you:

Instead of using hex number values for the CSS property variables, I used a color keyword variable which is much easier to read and understand. That concludes the introduction to variables in Sass. Next we'll learn about importing different files into custom.css and using partials.