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 is being inserted into another file. Enter the following at the top of the file as a marker:

/* buttons */

Save the buttons file and then open up custom.scss and add the following line of code to the file:

@import "components/_buttons.scss";

That line of code uses the @import rule, which will allow us to import the _buttons.scss file into our main theme file that we are calling custom.scss. As I've mentioned, the reason you need to do this is for maintainability. This makes the code much easier to read and to add/remove components, which is just another way of saying it makes it more modular.

Before we can test this out to make sure it works, we need to add some code to our _buttons.scss file. Let's add some simple CSS to change the primary button as an example:

.btn-primary { 
  background-color: green; 
}

After adding this code, save the file and do a harp compile. Then launch the server and check out the home page; the buttons will be green like this:

After testing that out, you may want to take that custom code out unless you want the buttons to remain green. That's just a simple example of how you can use partials to make your Bootstrap components more modular. I'll get into that topic in greater depth in a future chapter but for now we are going to focus on using Sass mixins.

Using mixins

Writing something in CSS, such as, for example, browser vendor prefixes, can be really tedious. Mixins allow you to group CSS declarations together so that you can reuse them through your project. This is a great because you can include the code for, say, a border-radius, using one line of code instead of multiple lines for each browser. To start, open up custom.scss and insert the following code at the top of the file:

@mixin border-radius($radius) { 
  -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
      -ms-border-radius: $radius; 
          border-radius: $radius; 
}

Let's go over a few things that are happening here:

A mixin is always started in Sass with the @mixin keyword
Following that, you want to include the property name to target as well as set a variable, in this case $radius
We then apply the $radius variable to each browser prefix instance

We've set up the mixin to handle the border-radius property but we still need to add the corner value to an element. Let's change the border-radius value for the default Bootstrap button. Open up _buttons.scss and insert the following code:

.btn { 
  @include border-radius(20px); 
 }

Let me explain what is happening here:

I'm targeting all Bootstrap buttons by inserting the .btn class
Inserting the @include keyword will grab the border-radius mixin
Lastly, I've provided a value of 20px, which will make our buttons look really rounded on each end

Save your file, run the harp compile command, and then, when you view the project in the browser, it should look like this:

That concludes a fairly simple example of how to use mixins in Bootstrap 4. You can use them for many other reasons but replacing CSS3 vendor prefixes is one of the most common and useful. Next we'll cover a slightly more complicated topic in Sass, which is the use of operators.

How to use operators

Sass allows you to perform basic math operations in CSS, which is useful for a number of reasons. First of all, you can use the following operators +, -, *, /, and %. To give you an understanding of how you can use operators in CSS, let's learn how to convert a pixel-based grid into percentages. We'll create two columns in pixels and then use some Sass to convert them to percentages. Open up custom.scss and insert the following code:

.left-column { 
  width: 700px / 1000px * 100%; 
} 
 
.right-column { 
  width: 300px / 1000px * 100%; 
}

Now, I've created two columns here. The .left-column class will have a width of 70% after we compile this Sass operator. The .right-column class will have a width of 30%. So if we add those together we'll get roughly a three-quarter layout with a larger column on the left and a smaller column on the right. Run a harp compile command to build this code and then open up custom.css in the /www/css folder. There you should find the following code:

.left-column { 
  width:70%; 
} 
 
.right-column { 
  width:30%; 
}

As you can see, our Sass operators have been converted into regular percentage values. That's just one way you can use operators in Sass; I'd encourage you to play around more with them. Next we're going to learn how to set up a library of Sass variables that you can use to create a Bootstrap theme.

Previous Chapter

Using Sass in the blog project

Next Chapter

Creating a collection of variables

Table of Contents for Bootstrap 4 – Responsive Web Design

Importing partials in Sass

Using mixins

How to use operators

Table of Contents for
Bootstrap 4 – Responsive Web Design