Use SASS to customize button colors

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...

SASS is compiled into CSS on the server side. The browser doesn't understand SASS. You need a SASS compiler such as node-sass set-up first. — Carol Skelly, Aug 01 '19 at 11:32
The server I use is a shared hosting, I doubt I'll be able to install that. Nor that I've ever heard of it anyway, but I'll research it. — Peter K., Aug 01 '19 at 11:51
Then you may want to consider a custom Bootstrap build: https://themestr.app/customize using the colors you want. — Carol Skelly, Aug 01 '19 at 12:06
SASS can also be easily compiled locally into CSS and used on the server. — kopz, Aug 01 '19 at 12:18
Can you give me an example of how I can use the themestr customizer to add 25 button classes? If I get it correctly, I can use it to define some additional classes? Or is it that you can use it to compile the whole Bootstrap version? If it's the second, I'm happy with the standard Bootstrap used from their CDN. I just want to compile those 25 button classes. I'm a bit confused! :( — Peter K., Aug 01 '19 at 12:46
I studied a little Bootstrap's source (the scss files) and found that button-variant is referenced two times... One time in scss/_buttons.scss `@each $color, $value in $theme-colors { .btn-#{$color} { @include button-variant($value, $value); } }` and another time in scss/mixins/_buttons.scss `@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { ... }` — Peter K., Aug 01 '19 at 21:21
So, @Zim, what confused me in relation to your answer on the other topic I mentioned in my initial post, is that you used the second customization (the one with the 6 variables). Wouldn’t it be easier to use the first one, which would only take 2 variables (one for the background and another for the border - which from what I see could even be a darkened percentage of the background color variable anyway)? — Peter K., Aug 01 '19 at 21:23

score 1 · Answer 1 · answered Aug 02 '19 at 02:23

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?

nazifa rashid · Answer 2 · 2019-08-01T12:01:44.510

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
);

Use SASS to customize button colors

2 Answers2