Customizing helpers
The only helper that can be customized through the use of variables found in the _variables.scss
file is the ratio helper. It has a Sass map with default values that can be modified as you like. Some of the other helpers use theme colors, variables from other elements, or only have non-visual aspects to customize. That’s why we’re focusing on the ratio helper here.
In this example, we will add more aspect ratios to the map mentioned before, which will then be available to us as additional helper classes. The line numbers, variable name, and default values for the aspect ratios map are as follows:
bootstrap/scss/_variables.scss
528 $aspect-ratios: ( 529 "1x1": 100%, 530 "4x3": calc(3 / 4 * 100%), 531 "16x9": calc(9 / 16 * 100%), 532 "21x9": calc(9 / 21 * 100%) 533 ) !default;
We will now first create our own Sass ratio map with these new values and then merge...