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


Preface

This article is intended for beginner.

Goal: Apply SASS in Hexo theme

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

Table of Content

  • Preface: Table of Content

  • 1: Prepare

  • 2: Compile SASS

  • 3: Yet Another Design Example

  • 4: SASS Summary

  • What is Next ?

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.

Extract and run on CLI:

$ npm install

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

  1. Create directory themes/tutor-03/sass

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

  1. Edit configuration _config.yml, and save.
# Extensions
theme: tutor-03
$ tree -d -I node_modules -L 2

Hexo 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

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

Hexo Bulma SASS: sass update

Result: [gitlab.com/…/static/bulma][tutor-css-bulma]

Generated CSS

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

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/css/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/layout.ejs

  • layouts/index.html

  • layouts/partials/site/header.html

  • layouts/partials/site/footer.html

Layout: EJS Layout

We scan start with the same layout as previous tutorial.

<!DOCTYPE html>
<html lang="en">
<%- partial('site/head') %>
<body>
<%- partial('site/header') %>

  <div class="columns is-8 layout-base maxwidth">
    <%- body %>
  </div>

<%- partial('site/footer') %>
<%- partial('site/scripts') %>
</body>
</html>

Layout: EJS Page

  <main role="main" 
        class="column is-full blog-column box-deco has-background-white">
    <article class="blog-post">
      <h1 class="title is-4"><%- page.title %></h1>
      <%- page.content %>
    </article>
  </main>

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

Render: Browser Page

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

Hexo 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

Hexo 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

Hexo 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 [ Hexo - Bulma - SASS Layout ].

Thank you for reading.