Aug 26, 2017 · 1 min read
Nice - great write up. Concerning the example you gave about creating a class for darker buttons — one thing you can do is use button-variant — the mixin bootstrap uses to generate its own buttons. Here’s something I do in my projects for lets say a purple button:
.btn-purple {
@include button-variant($purple, darken($purple, 15%);
}As you can see, the button-variant mixin takes a background color and border-color as parameters and builds a button using them. It actually sets the text-color of the button on its own — basing its decision on the text’s contrast against the background you chose. (Although I think they are reversing the automatic text-color part in a future release, so you’ll just be setting the text-color yourself.)
