github.com/bugoio/bugo-sass-utilities

Bugo SASS Utilities (docs in progress)

A Hugo Module that contains Bugo specific Sass functions, mixins & variables

Installation

Before starting check the list below:

• Your Hugo project must use Hugo v0.58.3 or greater
• Your Hugo project must be in a git repository
• Your Huog project must be a Hugo Module

If your project isn't a Hugo Module.

hugo mod init

Get this module.

hugo mod get github.com/bugoio/bugo-sass-utulities

Add it to your Hugo config file (shown in YAML).

module:
  imports:
  - disable: false
    ignoreConfig: false
    path: github.com/bugoio/bugo-sass-utilities

Usage

Partials

bugo-sass-variables

Overview

This partial consolidates all SASS variables stored in your project's assets folders. Since this runs at build time it uses Hugo's "consoloidated" assets directory.

Files must be named one of two ways to be included.

• *-global-variables.scss - Included at the top of the consolidated file alphabetically.
• *-vars.scss - Included alphabetically after the global variables

Using the partial template

Add the partial to your /layouts/_default/baseof.html template. Anywhere will do. This partial does not output any markup. The partial call below is included in the bugo-stylesheets partial. If you're already using bugo-stylesheets, you don't need to call it again.

{{ partial "utilities/bugo-sass-utilities" . }}

Creates a variables file in your local build folder from all files labeled *-vars.scss at build time.

• Location: /public/site-variables-example.scss
• includes **/*-global-variables.scss first

bugo-stylesheets

Overview

This partial returns a permalink to a consolidated CSS resource.

• Processes .scss`` files in Hugo's assetDir (/assets`` by default)
• Excludes SASS partials (_*.scss)
• Hugo Environment sensitive. Not NODE_ENV!
  • production - compressed, no source maps
  • All others - expanded with source maps

Using the partial template

{{ $stylesheet := partial "utilities/bugo-stylesheets" . }}
<link rel="stylesheet" href="{{ $stylesheet }}" media="screen" />