Skip to content

SASS

Excellent question 🙌 — the way Jekyll themes (like Minima or custom ones on GitHub Pages) organize their Sass (.scss) files can feel a bit mysterious at first. Let’s break down the relationships:

📂 The _sass folder in Jekyll¶

  • This folder contains partial Sass files (filenames start with _ like _layout.scss, _variables.scss, _base.scss).

  • These files don’t compile into CSS by themselves. Instead, they’re imported into a main stylesheet (often assets/main.scss or assets/css/style.scss).

🧩 Common Files & Their Roles¶

  1. _variables.scss

  2. Stores reusable values like:

    $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$base-font-size: 16px;
$spacing-unit: 1.5rem;
$brand-color: #2a7ae2;
    * These variables get used everywhere else, so if you change $base-font-size, it updates across the site.

  3. _layout.scss

  4. Defines the layout structure of your site:

    • Site header (.site-header)
    • Navigation bar (.site-nav)
    • Posts container (.post-content)
    • Sidebar, footer
    • It typically uses variables from _variables.scss so you don’t hardcode sizes/colors.

  5. _base.scss (sometimes called _typography.scss or _reset.scss)

  6. Sets global styles:

    • body { font-family: $base-font-family; font-size: $base-font-size; }
    • Link styles (a { color: $brand-color; })
    • Headings (h1, h2, h3 { font-weight: bold; })
    • Often imports Google Fonts or sets up the baseline typography for posts.

  7. _syntax-highlighting.scss

  8. Controls how code blocks look (important for GitHub Pages blogs).

  9. Usually overrides Rouge/Pygments highlighting.

  10. _posts.scss or _blog.scss (if present)

  11. Controls post-specific styles:

    • .post-title, .post-content, .post-meta
    • Font size, line-height, spacing for blog text

📊 How They Work Together¶

  1. You have a main SCSS entry file like assets/main.scss:
---
# Only the front matter makes Jekyll process this as SCSS
---
@import "variables";
@import "base";
@import "layout";
@import "syntax-highlighting";
@import "posts";

  1. Jekyll compiles this into one minified CSS file (_site/assets/main.css).

  2. Your site’s HTML (_layouts/default.html) links to that CSS.

  3. When you tweak _variables.scss, it flows into _layout.scss, _posts.scss, etc., changing styles everywhere.

🔤 Controlling Post Fonts & Styles¶

If you specifically want to control how posts look (like font family, size, spacing):

  • Look inside _base.scss and _posts.scss (or _layout.scss if the theme mixes them).

  • Common selectors:

.post-content {
  font-family: $base-font-family;
  font-size: 1rem;   // inherits from $base-font-size
  line-height: 1.7;
}

.post-title {
  font-size: 2rem;
  font-weight: bold;
}

Change the variables in _variables.scss or override directly in _posts.scss.

âś… Summary:

  • _variables.scss = the “settings” (fonts, colors, sizes).

  • _base.scss = the “foundation” (typography, reset, global body styles).

  • _layout.scss = the “structure” (header, nav, footer, containers).

  • _posts.scss = the “content styling” (titles, paragraphs, meta).

  • All are imported into main.scss, which GitHub Pages compiles into your site’s CSS.