How to Set Up Your Sass Package in Bootstrap

If you've been in web design and development, you've probably heard of SASS (short for syntactically awesome style sheets).

SASS is a CSS with superpowers and once you try SASS you won't want to go back to writing plain CSS. For larger and relatively complex websites, using SASS is necessary as it is a great tool to keep your code organized, allow you to do more with CSS, and save time writing code. Combined with the power of Bootstrap, you'll be able to build websites much more efficiently. The entire Bootstrap runs on SASS. If you haven't worked with SASS before, however, it can be intimidating to download and set it up on your computer. In this tutorial, we'll show you where to get SASS and how to set it up.

There are multiple ways of downloading Bootstrap SASS.  We're not going to get into various ways of downloading the Bootstrap files but you can see instructions over here. Once you download the files, open them up in your text editor. It is highly recommended that you don't alter the original Bootstrap files. Instead, you need to create your own custom SASS files and add new code and modifications to those files. If you downloaded Bootstrap using npm, the folder structure will look like this:

Note: SASS has two syntaxes and SCSS is the main syntax for SASS so the SASS files mostly have an .scss extension.

If you downloaded Bootstrap without npm, the folder structure will look like this:

Importing Bootstrap files

Depending on your project, you may or may not want to import all the Bootstrap files. There are two ways of importing Bootstrap files using the @import feature:

Import all the Bootstrap files

Include the below code your custom.scss file:

Import the Bootstrap files of your choosing:

Some Javascript files are required in Bootstrap for the plugins to work. These files are functions, variables, and mixins. In your custom.scss file, first import the required files and then import the files you'd like to include as below:

Building your custom theme

Previously we talked about avoiding altering the original Bootstrap files because when you update Bootstrap, those files may not only get overwritten but it will be hard to see the modifications you have done as well. That's why you should create your own folder and file structure separate from the Bootstrap files. It is a good practice to figure out the architecture, layout and color scheme of your website so that you can deconstruct your website into components such as header, footer, side navigation, etc and know which color codes you will use in your variables.scss file. Here's a sample scss directory structure we have:

As you can see above, we deconstructed our website into components and created separate scss files for each of those components. 

Variables

The variables file is one of the most important files in your scss directory as everything from colors, fonts, font sizes, spacing and so much more are stored here. Bootstrap comes with its default _variables.scss file. If you imported this file, you need to create a separate file for your theme's variables to customize and override Bootstrap's variables.scss file. If you didn't import the file, you need to create your own theme variables file and start from scratch. In our example, all our variables are stored in a file we named as theme-variables.scss:

Have a main theme file

Create a main theme file that stores the styling of the elements that will be included in every web page on your website such as the style of your lists, link colors, images etc. Here's a sample code for a theme.scss file:

Summary

And that's everything you need to know about setting up your Sass package with Bootstrap. We'll leave you with a few dos and don'ts:

- You can choose to import all the Bootstrap files or pick specific files to import.

- Don't modify the original Bootstrap files. Instead, create your own files and make the modifications over there.

- Deconstruct your website into components and create a color scheme then organize your scss folder structure to mimic your site structure.