Is there a way to make spacer variables more generic while using Bootstrap in a custom class?
I have a class called .box and I would like to apply the pl-3 class from Bootstrap 4 without adding it directly in the HTML, but rather styling it in sass.
I aim to utilize the spacer variables of Bootstap and avoid hardcoding them in the class itself. This will allow for easy adjustments to padding in the future by only modifying the sass file.
The following variables are defined:
$spacer: 1rem !default;
$spacers: (
0: 0,
1: ($spacer * .125),
2: ($spacer * .25),
3: ($spacer * .375),
4: ($spacer * .5),
5: ($spacer * 0.75),
6: ($spacer * 1)
)
What is the most effective approach for achieving this? One method I've come across is:
.box{
@extend .pl-3;
}
However, I find this method lacking in clarity. Are there alternative or better ways to accomplish this? For example:
.box{
padding-left: $spacer-3;
}