I'm currently working on an HTML/CSS project where I aim to establish classes for labels and texts based on their color. For instance:
.text-red{
color: red;
}
.label-white{
color: white;
}
In order to achieve this, my approach involves creating a mixin that takes a name and a color as arguments to generate these classes. Here is the mixin I've drafted:
.mixin(@name, @color) {
.text-@{name} {
color: @color !important;
}
.label-@{name} {
color: @color !important;
}
}
.mixin('white', white);
Upon executing this mixin, the output I receive is:
.text-'white'{ /* note the quotes*/
color: #ffffff
}
If I were to run the mixin as .mixin(white, white); It yields:
.text-#ffffff{
color: #ffffff
}
Inquiry: Is there a way for me to construct a class like text-white using a mixin?