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
2: Compile SASS
3: Yet Another Design Example
4: SASS Summary
What is Next ?
If you do not have any idea about SASS you should read this first:
You can download the source code of this article here.
Extract and run on CLI:
$ npm install
I wrote about Bulma Navigation Bar that used in this article. Step by step article, about building Navigation Bar. You can read here:
This preparation is required.
- Create directory themes/tutor-03/sass
You should see the sass directory, in this new tutor-03 theme:
- Edit configuration _config.yml, and save.
# Extensions theme: tutor-03
$ tree -d -I node_modules -L 2
- Have a look at the example in repository.
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
2: Compile Sass
There are some tools available.
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 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,
This will continuously update as the input change.
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.
We need to refresh our memory about what is in the
- Create bulma.scss
@import "initial-variables" @import "vendors/bulma" @import "derived-variables"
- Create 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"
What new class provided in this
This is the list:
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.
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
- themes/tutor-03/layout/page.ejs (homepage)
<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>
<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.
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
And the content of css output would be:
$ tree static/css static/css ├── bulma.css ├── bulma.css.map ├── main.css └── main.css.map
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.