Using the RFS Sass plugin

RFS is officially described as a “unit resizing engine” that “automates responsive resizing.” In other words, RFS is a collection of Sass mixins and functions for calculating automated responsive CSS values based on the width of the viewport. Being an abbreviation for Responsive Font Sizes, it was originally developed for font resizing, but it’s now capable of resizing almost any value for any CSS property with units. RFS can be downloaded from its official website at GitHub at github.com/twbs/rfs/ or through NPM with the command npm install rfs. As you can see from the GitHub URL, the repository lives side by side with Bootstrap, since RFS is a side project from the team behind Bootstrap. In fact, RFS comes packaged with Bootstrap 5 as the file _rfs.scss in the vendor folder, and it’s used for resizing font sizes. This is most apparent in headings. RFS is enabled by default by the global option $enable-rfs and can...