SASS can help you write cleaner, more organized CSS code and speed up your development process. In this guide, you will learn how to add and use SASS in Jekyll.
I’m assuming you already have an existing Jekyll project. If you don’t, please refer to my guides on:
Installing SASS
The good news is that you don’t need to install anything.
When you setup a Jekyll project, Jekyll installs jekyll-sass-converter plugin. This means that Jekyll can automatically use the plugin to convert SASS files into CSS files, which can then be used by your website.
Creating a SASS File
To create a new SASS file in your Jekyll project, simply create a new file with a .scss extension. Put your SASS files in a folder named _sass in the root of your project.
Create SASS Partials
SASS allows you to break your CSS code into smaller, more manageable pieces using partials. For example I have a partial whose file name is _title.scss with the code.
.title {
color: $black;
font-size: 48px;
line-height: 1.2;
@include media-breakpoint-up(lg) {
font-size: 50px;
}
}
Using SASS variables
SASS variables allow you to define values once and reuse them throughout your SASS code. To create a variable, use the $ symbol followed by the variable name and value. For example, to create a variable for the primary color of your site, add the following line to your SASS file:
$primary-color: #007bff;
You can then use the variable in your code like this:
.nav-link {
color: $primary-color;
}
Importing SASS Partials
Create a style.scss file inside the /css/ folder in the root of your project.
Inside your style.scss, add front matter at the top.
---
---
These tells Jekyll to process the the file into style.css.
Below the frontmatter, you can import the SASS partials that you want to be added to your CSS file.
To import a SASS partial into your main SASS file, use the @import keyword followed by the file path. For example, to import a partial named _variables.scss located in the _sass folder, add the following line to your main SASS file:
@import '_variables.scss';
@import '_title.scss';
Link SASS file to Layout
To link your SASS file to your HTML layout template, add the following line to the <head> section of your layout:
<link rel="stylesheet" href="{{ "/css/style.css" | relative_url }}">
Replace style.css with the name of your main SASS file. Jekyll will automatically compile your SASS code into CSS code and generate a file with the same name as your SASS file in the css folder.
Compiling SASS in Jekyll
Jekyll automatically compiles your SASS files into CSS files when you run the jekyll serve or jekyll build command. If you want minified CSS files during compilation, add the following line to your _config.yml file:
sass:
sass_dir: _sass
style: compressed
Organizing SASS files in Jekyll
You can organize your SASS files in any way that makes sense for your project. One common approach is to have a separate SASS file for each section of your site, such as _base.scss for basic styles, _layout.scss for layout styles, and _components.scss for reusable components. You can then import these files into your main SASS file using the @import keyword.
