Recently, I encountered a scenario where I needed to automate the creation of a series of CSS classes by utilizing a mixin. This led me to ponder if there is a dynamic approach to achieve this.
Essentially, the classes I have are structured as follows:
.tile-1, .tile-2, .tile-3, .tile-4 ...
Where each subsequent tile class is set to a height that is based on a multiple of the preceding one - for example, tile-2 being double the height of tile-1, tile-3 three times the height of tile-1, and so forth.
In response, I developed a rudimentary mixin which allows setting the base-height via a SCSS variable and computes the heights accordingly:
@mixin tile-height($size) {
height: $size * $tile-height;
}
Here, the value of $tile-height is sourced from another SCSS file.
The primary query now arises - can the generation of these tile-x classes be automated within the stylesheet by leveraging the number included in the class name as a parameter for the mixin?