I’ve known about SASS for a long time but never took the time to learn how to use it. For a new project (a University project) I wanted to use Bootstrap but also wanted custom colors on the website. Instead of creating my own CSS I decided to stick with Bootstrap but learnt to modify it for my own color palette.
The project is around COVID-19 and medical testing. As such I wanted to use a custom pallet of
Green representing Health
Blue standing for Medical personnel (Professions)
Yellow for Happiness
I spent some time working out how to achieve this in Bootstrap’s provided Scss files. It was so easy that I felt a bit of a fool that I had not learnt this earlier!
Prerequisites:
Before following this guide, you will need to have Nodejs with NPM installed.
To start lets create a webpage that displays some buttons using Bootstrap. Download boot into the web project (I downloaded Bootstrap sources from https://getbootstrap.com/docs/4.5/getting-started/download/ ). Unzip the sources into the webpage directory.
My HTMl file contains
<html> <head> <link rel="stylesheet" href=" bootstrap-4.5.3\dist\css bootstrap.css" /> </head> <body> <h1>Custom Bootstrap using Sass</h1> <span class="btn btn-primary">Primary</span> <span class="btn btn-secondary">Secondary</span> <span class="btn btn-danger">Danger</span> <span class="btn btn-health">Health</span> <span class="btn btn-prof">Prof</span> <span class="btn btn-happy">Happy</span> </body>
</html>
Which, when viewed in a browser looks like:
A standard looking Bootstrap example of buttons. The last 3 buttons have classes that do not exist so just get ignored and the standard class=”btn” is used for them.
To start customizing the Bootstrap css we need to install the sass compiler. Using NPM run the following command
npm install -g sass
This installs SASS globally so we can run it from any project. Now I can start customizing boostrap to meet my requirements. First I modify the _variables.scss file found in the bootstrap scss folder. Before I get to custom colors, I’ll just change the primary color to check that my configuration is working correctly:
For my test I am going to change the primary color to red instead of the normal Bootstrap blue.
Change line 67 to
$primary: $red !default;
Save the file and now I can compile the Scss into css. In the terminal I run
sass C:\projects\Sass1\bootstrap-4.5.3\scss\bootstrap.scss C:\projects\Sass1\bootstrap-4.5.3\dist\css\bootstrap.css
This command overwrites the originally downloaded CSS file. You could instead place the output file anywhere, for example in a \css directory in your project
Now refresh the web page
We have effectively changed all *-primary classes to be red.
How about creating our own button classes. Would it not be easier to use class btn-happy for a yellow button instead of trying to remember if the primary or secondary is yellow.
In _variables.scss add the following lines after $dark (at line 75).
$health: $green; $prof: $blue;
$happy: $yellow;
In theme-colors in the section below add
"health": $health, "prof": $prof,
"happy": $happy
So that theme-colors looks like
$theme-colors: () !default; $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark, "health": $health, "prof": $prof, "happy": $happy ), $theme-colors
);
Save the changes and compile Scss to css again
When I refresh the web page I can see my custom colored buttons, using my own class names.
I now have buttons with my custom colors. In fact all the Bootstrap components that use the color pallet are now customized. To show this I can display an alert
<div class="alert alert-happy mt-5" role="alert"> A simple Happy alert—check it out!
</div>
When we refresh the page:
Note also how the compilation process did the same color modulation of yellow to fit the color to suit the other alert colors.
Personally, I like the Bootstrap color theme. But being able to modify it to suit my own requirements makes it a lot easier to customize and use wherever I need it. For the website I am designing I don’t have Primary and Secondary colors. I have three primary colors called Health, Prof and Happy.