Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 


Preface

This article is intended for beginner.

Goal: Changing Bootstrap Color with Sass in Hugo theme

All these examples below based on official bootstrap examples:

Table of Content

  • Preface: Table of Content

  • 1: Prepare

  • 2: Bootstrap Sass

  • 3: Custom SCSS

  • 4: Bootswatch (as an example)

  • 5: Custom Color Variables

  • Summary

  • What is Next ?


1: Prepare

This preparation is required.

Theme

With your file manager, copy manually

  1. From themes/tutor-02/* to themes/tutor-03.

Remove completely:

  1. themes/tutor-03/static/dist/css/

Create directory 3. themes/tutor-03/sass

You should see the sass directory, in this new tutor-03 theme:

  1. Edit config.toml, and save.
$ cat config.toml
theme        = "tutor-03"

Hugo Bootstrap SASS: Tree theme

  1. Have a look at the example in repository.

Source: gitlab.com/…/themes/tutor-03

Boostrap Source

You can download your bootstrap using

$ wget https://github.com/twbs/bootstrap/archive/v4.1.3.zip

With your file manager, using newly downloaded bootstrap directory, copy manually:

  • From bootstrap-4.1.3/scss/* to themes/tutor-03/sass/bootstrap.

Change working directory

$ cd /themes/tutor-03

Your sass directory should be looks like this.

$ tree -d sass
sass
└── bootstrap
    ├── mixins
    └── utilities

3 directories

Hugo Bootstrap SASS: Tree sass

Source: gitlab.com/…/sass/bootstrap


2: Bootstrap Sass

Install

$ gem install sass
...

Successfully installed sass-3.5.7
Parsing documentation for sass-3.5.7
Installing ri documentation for sass-3.5.7
Done installing documentation for sass after 13 seconds
1 gem installed

Hugo Bootstrap SASS: gem install sass

Deprecated

Ruby-sass will be deprecated soon.

As an alternative you can use dart-sass, node-sass.

Or any task runner such as gulp or grunt.

Using SASS

Using SASS in CLI is easy. However, you need to read the manual page first.

$ sass --help

You don’t need to create this directory, as sass will create necessary directory.

$ mkdir static/bootstrap/

Generate CSS

Using themes/tutor-03 as working directory, generating css is as simply as this command below. The command will map any necessary input scss in sass directory, into output css in static directory.

$ sass --update sass:static
      write static/bootstrap/bootstrap-grid.css
      write static/bootstrap/bootstrap-grid.css.map
      write static/bootstrap/bootstrap-reboot.css
      write static/bootstrap/bootstrap-reboot.css.map
      write static/bootstrap/bootstrap.css
      write static/bootstrap/bootstrap.css.map

Hugo Bootstrap SASS: sass update

Result: gitlab.com/…/static/bootstrap

Continuously

To avoid, typing command above over, and over again. Consider to this command to continuously update as the input change.

$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.

Hugo Bootstrap SASS: sass watch

Assets: Stylesheet

We need an adjustment, as we use different bootstrap stylesheet.

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{{ .Page.Title | default .Site.Title }}</title>
  
    <link rel="stylesheet" type="text/css" href="{{ "bootstrap/bootstrap.css" | relURL }}">
</head>

Now check the browser, to check if there is no error.


3: Custom SCSS

Now we are also going to move static/css/.

Create Custom CSS

Rename these three artefacts:

  • themes/tutor-03/static/css/blog.css to sass/css/_blog.scss

  • themes/tutor-03/static/css/bootstrap-custom.css to sass/css/_bootstrap-custom.scss

  • themes/tutor-03/static/css/sticky-footer-navbar.css to sass/css/_sticky-footer-navbar.scss

source
gitlab.com/…/sass/css/

Watch The Changes

$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> New template detected: sass/css/_blog.scss
>>> New template detected: sass/css/_bootstrap-custom.scss
>>> New template detected: sass/css/_sticky-footer-navbar.scss

Hugo Bootstrap SASS: rename css to scss

Result: gitlab.com/…/static/css

Generate CSS

Create main.scss
gitlab.com/…/sass/main.scss.
@import
    "sticky-footer-navbar",
    "blog",
    "bootstrap-custom"
;

You should see the change in the terminal.

$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> New template detected: sass/css/main.scss
      write static/css/main.css
      write static/css/main.css.map
>>> Change detected to: sass/css/main.scss
      write static/css/main.css
      write static/css/main.css.map

Hugo Bootstrap SASS: main.css

Result

The content of themes/tutor-03/static/css should be as below:

$ tree static/css 
static/css
├── main.css
└── main.css.map

Hugo Bootstrap SASS: content of css directory

Result: gitlab.com/…/static/css/main.css

It is, a looong stylesheet, automatically crafted by sass.

Assets: Stylesheet

Don’t forget to add necessary stylesheet.

<head>
    ...
  
    <link rel="stylesheet" type="text/css" href="{{ "boostrap/bootstrap.css" | relURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/main.css" | relURL }}">
</head>

Server Output: Browser

Check the browser again, to check if there is no error.

Hugo Bootstrap SASS: content of css directory


4: Bootswatch (as an example)

You can change bootstrap predefined variable. You can make your own variable override.

Resources

Luckily, you do not to reinvent the wheel, there are already good color schemes, in the internet.

I took one example, the bootswatch.

Prepare

Clone

$ git clone https://github.com/thomaspark/bootswatch

Copy from bootswatch/dist/* to themes/tutor-03/sass/bootswatch/

You should see, many theme in that directory.

$ ls sass/bootswatch
cerulean  flatly   lux      sandstone  solar      yeti
cosmo     journal  materia  simplex    spacelab
cyborg    litera   minty    sketchy    superhero
darkly    lumen    pulse    slate      united

Remove unnecessary files.

$ find themes/tutor-03/sass/bootswatch -name "bootstrap*" -exec rm {} \;

This will remove any all compiled bootstrap.css. Saving some space.

source
gitlab.com/…/sass/bootswatch/

Generate CSS

Create bootswatch.scss
gitlab.com/…/sass/bootswatch.scss.
@import
    "bootswatch/cerulean/variables",
    "bootstrap/bootstrap",
    "bootswatch/cerulean/bootswatch"
;

Again, you should see the change in the terminal.

$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> New template detected: sass/css/bootswatch.scss
      write static/css/bootswatch.css
      write static/css/bootswatch.css.map

Hugo Bootstrap SASS: Generate Bootswatch CSS

Result: gitlab.com/…/static/css/main.css

Assets: Stylesheet

Don’t forget to make an adjustment, as we use bootstrap stylesheet from bootswatch.

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{{ .Page.Title | default .Site.Title }}</title>
  
    <link rel="stylesheet" type="text/css" href="{{ "css/bootswatch.css" | relURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/main.css" | relURL }}">
</head>

Switch Theme

You may switch to other template. There is already some free swatch such as: cerulean, cosmo, cyborg, darkly, flatly, journal, litera, lumen, lux, materia, minty, pulse, sandstone, simplex, sketchy, slate, solar, spacelab, superhero, united, yeti.

$ cat sass/css/bootswatch.scss

@import
    "bootswatch/flatly/variables",
    "bootstrap/bootstrap",
    "bootswatch/flatly/bootswatch"
;

But sometimes you need some color adjustment, to match. Here I remove the text-mute class from the span tag.

<footer class="footer bg-dark text-light">
  <div class="container text-center">
    <span>&copy; {{ now.Year }}.</span>
  </div>
</footer>

Server Output: Browser

Open in your favorite browser. You should see, a homepage, with different theme color.

Hugo Bootstrap SASS: Bootswatch Flatly Theme


5: Custom Color Variables

If you want, you can create your own custom color. Supposed you want a pink feminine navigation bar, you can just adjust the color.

// Variables

$pink:  #e83e8c !default;
$primary:  darken($pink, 10%) !default;

Note that, darken is sass function.

Generate CSS

Do not forget to make the bootstrap.scss.

@import
    "bootstrap/functions",
    "variables",
    "bootstrap/bootstrap"
;

You should see the change in the terminal, as usual.

$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> New template detected: sass/css/_variables.scss
>>> New template detected: sass/css/bootstrap.scss
      write static/css/bootstrap.css
      write static/css/bootstrap.css.map

Hugo Bootstrap SASS: Generate Custom Bootstrap CSS

Assets: Stylesheet

Also change the site-head.html.

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{{ .Page.Title | default .Site.Title }}</title>
  
    <link rel="stylesheet" type="text/css" href="{{ "css/bootstrap.css" | relURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/main.css" | relURL }}">
</head>

And some adjustment, from bg-dark to bg-primary, so the pink can also affect the hyperlink.

<footer class="footer bg-primary text-light">
  <div class="container text-center">
    <span>&copy; {{ now.Year }}.</span>
  </div>
</footer>

Partial: HTML Header

I also simplified the logo, to match the pink color.

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
    <a class="navbar-brand" href="{{ .Site.BaseURL }}">
       <img src="{{ "images/logo-gear-pink.png" | absURL }}"
           alt="Logo" />
    </a>
...

Server Output: Browser

Open in your favorite browser. You should see, a homepage, with pink navigation bar.

Hugo Bootstrap SASS: Feminine Navigation Bar


Summary

As a summary, here is the content of scss input:

$ tree sass/css
sass/css
├── _blog.scss
├── _bootstrap-custom.scss
├── bootstrap.scss
├── bootswatch.scss
├── main.scss
├── _sticky-footer-navbar.scss
└── _variables.scss

Hugo Bootstrap SASS: Tree Input Summary

.

And the content of css output would be:

$ tree static/css 
static/css
├── bootstrap.css
├── bootstrap.css.map
├── bootswatch.css
├── bootswatch.css.map
├── main.css
└── main.css.map

Hugo Bootstrap SASS: Tree Output Summary

With map, you can debug in object inspector.


What is Next ?

I do not go deep about sass, as this is not a bootstrap tutorial.

There are, some interesting topic about Using SASS in Bootstrap in Hugo. Consider continue reading [ Hugo Bootstrap - SASS Customization ].

Thank you for reading.