↓Skip to main content

Start Using Sassy CSS in GoHugo

· loading · loading ·
Jared Lynskey
Author
Jared Lynskey
Emerging leader and software engineer based in Seoul, South Korea
Table of Contents

Introduction
#

SASS (Syntactically Awesome Stylesheets) is a powerful CSS preprocessor that allows you to write cleaner, modular, and more maintainable stylesheets. If you’re using GoHugo for your website, integrating SASS can significantly improve your development workflow.

In this post, we’ll cover how to set up SASS in your GoHugo project, along with practical tips to get the most out of this tool.

Why Use SASS with GoHugo?
#

SASS extends CSS with features like variables, nested rules, mixins, and functions. This makes it easier to write reusable and concise code. GoHugo’s built-in Pipes feature supports SASS/SCSS, enabling seamless integration and automatic compilation of your stylesheets.

Key Benefits:
#

  • Variables: Store reusable values like colors, fonts, or sizes.
  • Mixins: Reuse groups of CSS declarations.
  • Functions: Perform operations and generate values dynamically.
  • Modularity: Split your CSS into multiple files and import them easily.
  • Minification: Automatically compress CSS files for faster load times.

Official Resources
#

Getting Started with SCSS in GoHugo
#

Follow these four simple steps to set up and start using SCSS in your GoHugo project:

Step 1: Configure the Assets Directory
#

Create or move the assets folder to the root of your project. Alternatively, if you want to nest it inside the resources folder, update your config.toml file as follows:

assetDir = "resources/assets"

Step 2: Create the sass Folder
#

Inside the assets folder, create a new folder called sass. This is where you will store your SCSS files.

Step 3: Add a Main SCSS File
#

Create a file named main.scss inside the sass folder. This file will serve as the entry point for your styles. Add some sample SCSS code to get started:

// assets/sass/main.scss

// Variables
$primary-color: #3498db;

// Mixin
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Styles
body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
}

h1 {
  @include center;
  color: white;
}

Step 4: Update the HTML Template
#

In your head.html partial, include the following code to integrate the SCSS file into your project:

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

Make sure the file name in the code matches the file name of your SCSS entry point (main.scss).

Bonus: Organizing Your SCSS Files
#

For better maintainability, you can split your SCSS into multiple files and import them into your main.scss. For example:

// assets/sass/_variables.scss
$primary-color: #3498db;

// assets/sass/_mixins.scss
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// assets/sass/main.scss
@import "variables";
@import "mixins";

body {
  background-color: $primary-color;
}

h1 {
  @include center;
  color: white;
}

Conclusion
#

Integrating SASS into your GoHugo project opens up a world of possibilities for writing cleaner and more efficient CSS. With just a few steps, you can take full advantage of SASS’s features and boost your front-end development workflow.

Got any questions or tips about using SASS with GoHugo? Share them in the comments below!