ssg  
Where to Discuss?

Local Group

Preface

This article is intended for beginner.

Goal: Apply SASS in Hugo theme

Custom SASS could make a lot of enhancement, compared with pure Bulma’s CSS.

Reading

If you do not have any idea about SASS you should read this first:

Source Code

You can download the source code of this article here.

Related Article

I wrote about Bulma Navigation Bar that used in this article. Step by step article, about building Navigation Bar. You can read here:


1: Prepare

This preparation is required.

Theme

Create directory

  1. 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 Bulma SASS: Tree theme

  1. Have a look at the example in repository.

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

Example Source

Or we can just simplify the step, by extracting the source code provided above. You can read the detail of each SASS on Bulma SASS Introduction.

Your sass directory should be looks like this.

$ tree themes/tutor-03/sass/ -L 2
themes/tutor-03/sass/
├── css
│   ├── _blog.sass
│   ├── _box-decoration.sass
│   ├── bulma.sass
│   ├── _decoration.sass
│   ├── _derived-variables.sass
│   ├── _initial-variables.sass
│   ├── _layout.sass
│   └── main.sass
└── vendors
    ├── bulma
    └── bulma.sass

Hugo Bulma SASS: Tree sass

Source: gitlab.com/…/sass .


2: Compile Sass

There are some tools available.

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

$ dart-sass --watch -I sass sass/css:static/css/ --source-map
Compiled sass/css/main.sass to static/css/main.css.
Compiled sass/css/bulma.sass to static/css/bulma.css.
Sass is watching for changes. Press Ctrl-C to stop.

To avoid, typing command, over and over again, cosider using watch argument. This will continuously update as the input change.

Hugo Bulma SASS: sass update

Result: gitlab.com/…/static/bulma

Generated CSS

It is using the same place as previous CSS. So there is no need to change the header.

/themes/tutor-03/static/css/
gitlab.com/…/static/css/.

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

Bulma SASS

We need to refresh our memory about what is in the bulma.sass.

Create bulma.scss
gitlab.com/…/sass/bulma.scss.
@import "initial-variables"
@import "vendors/bulma"
@import "derived-variables"

Main SASS

Also the main.sass.

Create main.scss
gitlab.com/…/sass/main.scss.
@import "initial-variables"
@import "vendors/bulma/utilities/initial-variables"
@import "vendors/bulma/utilities/functions"
@import "vendors/bulma/utilities/derived-variables"
// @import "derived-variables"

@import "vendors/bulma/utilities/mixins"
@import "layout"
@import "decoration"
@import "box-decoration"
@import "blog"

Custom Class

What new class provided in this main.sass? This is the list:

  • maxwidth

  • box-deco, header-deco, footer-deco


3: Yet Another Design Example

We need to enhance the looks offered by all this new SASS. So we can differ, from the previous pure Bulma CSS design, in previous article.

Apply Custom Class on Layout

To see the changes we must apply the new class provided in or layout. Or even better, consider change the design color.

  • layouts/_default/baseof.html

  • layouts/index.html

  • layouts/partials/site/header.html

  • layouts/partials/site/footer.html

Default: Baseof Template

...
    <div class="columns is-8 layout-base maxwidth">
      {{- block "main" . }}
      {{ .Content }}
      {{- end }}

      {{- block "aside" . }}{{- end }}
    </div><!-- columns -->
...

Layout: Index

...
  <main role="main" 
        class="column is-full blog-column box-deco
               has-background-white has-text-centered">
...

Partial: Header

<nav role="navigation" aria-label="main navigation"
     class="navbar is-fixed-top is-white maxwidth header-deco"
     id="navbar-vue-app">
...
<footer class="site-footer">
  <div class="navbar is-fixed-bottom maxwidth
        is-white has-text-centered is-vcentered footer-deco">
...

Server Output: Browser

Open in your favorite browser. You should see, non-colored homepage, by now.

Hugo Bulma: Layout Homepage


4: Summary

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

$ tree sass/css
sass/css
├── _blog.sass
├── _box-decoration.sass
├── bulma.sass
├── _decoration.sass
├── _derived-variables.sass
├── _initial-variables.sass
├── _layout.sass
└── main.sass

Hugo Bulma SASS: Tree Input Summary

-._

And the content of css output would be:

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

Hugo Bulma SASS: Tree Output Summary

With map, you can debug in object inspector, such as using inspect element menu in firefox based browser.


What is Next ?

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

Create necessary sass, as you need.
However, still Bulma can save you,
from writing a lot of CSS code.

Consider continue reading next part of this article in [ Hugo - Bulma - SASS Layout ].

Thank you for reading.