Sass features used by Bootstrap

This is just a quick overview of the Sass features used by Bootstrap. We will dive deeper into how Bootstrap is built in the next chapter.

Syntax

As already mentioned, the Bootstrap Sass code is written using the SCSS syntax. It also uses the & parent selector for pseudo-classes and states, together with attribute selectors.

Partials

The Sass code for Bootstrap 5 is divided into 81 partials and five folders. These partials are then imported through other partials or regular SCSS files. This creates a good overview of all the various parts making up Bootstrap.

Variables

Variables are used extensively by Bootstrap. They are used to maintain visual consistency across components regarding colors, spacing, and more, but they are also used in such a way that they can easily be configured by a user before the generation of the CSS.

Maps

Maps are often used in Sass libraries and design systems. In Bootstrap, they are used primarily...