Chapter 8. Throwing in Some Sass

Up until now we've covered a bunch of different Bootstrap components and how to use them. In this chapter, we're going to change gears and learn about Sass, which will allow you to customize the look and feel of your components. I'll start by introducing some Sass basics that you need to know, move on to writing some basic code, and then show you the power of using variables in your components to save yourself valuable time when creating your web app or project.

Learning the basics of Sass

Sass stands for Syntactically Awesome Style Sheets. If you've never used or heard of Sass before, it's a CSS preprocessor. A preprocessor extends regular CSS by allowing the use of things such as variables, operators, and mixins in CSS. Sass is written during the development stage of your project and it needs to be compiled into regular CSS before you deploy your project into production. I'll cover that in more detail in the next section but don't worry because Harp.js makes this really easy to do.

Up until version 4 of Bootstrap, the CSS preprocessor used was actually Less. For a good while both Sass and Less were popular in frontend design circles. However, over the last few years, while Sass has emerged as the best choice for developers, the Bootstrap team decided to make the change in version 4. If you are familiar with Less but have never used Sass, don't worry as they are pretty similar to use so it won't take much to get you up-to-speed.

Using Sass in the blog project

As I mentioned in the previous section, Sass is part of the development process and the browser cannot read it in its native format. Before you can deploy the project, you need to convert or compile the Sass files into regular CSS files. Normally this would require you to install a Ruby gem and you would have to manually compile your code before you can test it. Luckily for us, Harp.js actually has an Sass compiler built into it. So when you run the harp compile command to build your templates, it will also build your Sass files into regular CSS. I bet you're starting to like Harp even more after learning that.

Updating the blog project

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.

Note

The file extension used for Sass files is .scss.

What we're doing here is creating a custom style sheet...

Importing partials in Sass

Just as you can do in Harp.js, you can use partials in Sass. If you've forgotten what a partial is, it's a little snippet of code that is saved into a different file and then imported into the main CSS theme or layout, in the case of Harp. This can be handy for making your CSS modular and easier to manage. For example, it would make a ton of sense to break every Bootstrap component into its own CSS file and then use the @import directive to bring them all into a single master theme, which is then included in your project. Let's go over an example of how you could do this for a single component. In your project, go to the /css directory and create a new sub-folder called /components. The the full path should be:

/css/components 

In the /components directory, create a new Sass file and name it _buttons.scss. Make sure you always insert an underscore at the start of the filename of a partial. The compiler will then ignore these files as the underscore means it...

Creating a collection of variables

One of the main things you'll want to do when using Sass in Bootstrap is to create a library of global variables that can be used throughout your theme. Think of things such as colors, backgrounds, typography, links, borders, margins, and padding. It's best to only define these common properties once and then you can reuse them through different components. Before we go too far, we need to create a new .scss file. Open up your text editor, create a new file, and call it _variables.scss. Save that file to the /css/components directory. For now, you can just leave it blank.

Importing the variables to your custom style sheet

Now that we've created the variables Sass file, we need to import it into our custom style sheet. Open up custom.css in your text editor and paste the following line of code at the top of the file:

@import "components/_variables.scss"; 

It's important to note that this file must be at the top of your custom style sheet file. The variables...

Customizing components

Let's first start by customizing a single component; later on I'll talk about creating a theme where you customize all the components in Bootstrap. To get started, we'll build on the button component we started to work on earlier. In this next step we are going to expand on the CSS we have added to fully customize the component. What you want to do is overwrite all the CSS classes and properties that you want to change. In some cases, this might only be a few things but in other scenarios you may want to change quite a bit.

Customizing the button component

To start, open up _buttons.scss located in /css/components in our project directory. The first thing we need to customize is the base .btn CSS class. Once we have applied some changes there, we'll add more CSS to control the look and feel of the different button variations. Insert the following CSS at the top of the file for the base button class:

.btn { 
  background-color: $grey; 
  border-color: $grey;...

Writing a theme

Creating your own Bootstrap theme is a bit of an undertaking. The good news is that once you've done it you can reuse a ton of the code for future themes. That's where the real power in making your code modular comes into play. Instead of starting over from scratch each time, you can reuse old code and just extend it. In the last section, we learned how to customize the button component that was the start of our own theme. Let's first start by looking at some common Bootstrap components that you'll want to customize for your own themes.

Common components that need to be customized

There are many ways that you can theme Bootstrap. In some cases, you may only need to customize a few components to get a unique look and feel going. However, you may want to do a more thorough theming process so that your theme doesn't resemble the default Bootstrap look at all. In this section, let's start by listing some of the common components you will most likely want to customize.

Next we'll...

Summary

That brings this chapter to a close. We've covered a ton of new content in this chapter including: the basics of Sass, how to use Sass in Bootstrap, how to create a library of Sass variables, how to apply those variables to customize Bootstrap components, and, finally, how to start writing your own Bootstrap theme. In the final chapter, I'll provide some advice on moving from Bootstrap version 3 to 4.