Use SASS to customize button colors - sass

Question

I'm only opening this topic because I don't have the necessary 50 reputation points to ask my question directly into the topic I'm interested in.
So, my problem is that I need 25 bootstrap buttons of specific colors (that the user will use to choose among some Pantone variations etc). I found this great topic how to change bootstrap version 4 button color where Zim suggests a SASS solution that obviously saves a lot of CSS writing for the various button states/borders/etc...
However, as I'm new to SASS, I don't understand how it's supposed to be implemented in my webpage. More specifically, I don't know where to put the mentioned color variable and new button classes.
Currently I use this https://www.codeply.com/go/76H7JWg7Zl but of course the border/mouseover/etc use the primary color of the btn-primary class...

Answer 1

After studying the scss source files of bootstrap and also some online resources, I ended up that defining the following SASS mixins would solve my problem:
#import "bootstrap";
.btn-ffa300 {
#include button-variant(#ffa300, darken(#ffa300, 5%));
}
.btn-ffd700 {
#include button-variant(#ffd700, darken(#ffd700, 5%));
}
.btn-97d700 {
#include button-variant(#97d700, darken(#97d700, 5%));
}
.btn-012169 {
#include button-variant(#012169, darken(#012169, 5%));
}
.btn-001489 {
#include button-variant(#001489, darken(#001489, 5%));
}
.btn-ff8200 {
#include button-variant(#ff8200, darken(#ff8200, 5%));
}
.btn-c4d600 {
#include button-variant(#c4d600, darken(#c4d600, 5%));
}
.btn-84bd00 {
#include button-variant(#84bd00, darken(#84bd00, 5%));
}
.btn-0033a0 {
#include button-variant(#0033a0, darken(#0033a0, 5%));
}
.btn-c8c9c7 {
#include button-variant(#c8c9c7, darken(#c8c9c7, 5%));
}
.btn-ff6900 {
#include button-variant(#ff6900, darken(#ff6900, 5%));
}
.btn-78d64b {
#include button-variant(#78d64b, darken(#78d64b, 5%));
}
.btn-009ca6 {
#include button-variant(#009ca6, darken(#009ca6, 5%));
}
.btn-002d72 {
#include button-variant(#002d72, darken(#002d72, 5%));
}
.btn-7c878e {
#include button-variant(#7c878e, darken(#7c878e, 5%));
}
.btn-ff6a13 {
#include button-variant(#ff6a13, darken(#ff6a13, 5%));
}
.btn-ef3340 {
#include button-variant(#ef3340, darken(#ef3340, 5%));
}
.btn-69b3e7 {
#include button-variant(#69b3e7, darken(#69b3e7, 5%));
}
.btn-002f6c {
#include button-variant(#002f6c, darken(#002f6c, 5%));
}
.btn-63666a {
#include button-variant(#63666a, darken(#63666a, 5%));
}
.btn-fe5000 {
#include button-variant(#fe5000, darken(#fe5000, 5%));
}
.btn-c8102e {
#include button-variant(#c8102e, darken(#c8102e, 5%));
}
.btn-003da5 {
#include button-variant(#003da5, darken(#003da5, 5%));
}
.btn-002855 {
#include button-variant(#002855, darken(#002855, 5%));
}
.btn-4f2c1d {
#include button-variant(#4f2c1d, darken(#4f2c1d, 5%));
}
I even confirmed that it's working by rewriting my previous fiddle, and indeed the result ended up EXACTLY as I wanted it to be (https://www.codeply.com/go/uYPxiuNkbu).
Codeply is also "kind enough" to provide in the appropriate tab the compiled css of the sass code used in the fiddle...
But that's an indirect way of preprocessing the sass code... What would a proper way be? Isn't there some sort of online CSS preprocessor? Ie, I read that (https://themestr.app/customize) can be used to customize bootstrap code and then all customizations end up in a compiles custom.css file... How does that work? So far I haven't succeed in achieving this. Some help with this please?

Answer 2

If you want to learn SASS you can go through their official website. If you know css sass won't be a tough one to learn.
For installing gulp there are lots of tutorials you can find!
https://css-tricks.com/gulp-for-beginners/ Here is the one that you can go through.
For using bootstrap 4 theming if you wish you can just learn sass basics and gulp is not required much. You can use propos instead of gulp.
You can simply follow the below steps
To install bootstrap on any local project:
npm init -y
npm install
npm install bootstrap --save
To run manually (Without Gulp):
sass path/filename.sass/filename.scss filename.css
After creating new theme you can use it the same way you're using bootstrap theme. For example: <button class="btn btn-custom-color"></button>
Hope it'll help
/* Change theme color */
$theme-colors: (
"info": #7eff4b,
"danger": #ff50f0,
"primary": #0095ff,
"secondary": #28a745
);
/* Create your own theme */
$theme-colors: (
"custom-color": #900
);