Configurar Sass

Jekyll tiene soporte nativo para Sass, por lo que no necesitas instalar loaders, bundlers ni herramientas externas. Solo debes respetar una estructura y algunas reglas clave.

1. Estructura básica del proyecto

La forma recomendada es usar la carpeta _sass para los parciales y assets para el archivo principal.

• _config.yml
• index.md (o index.html)

• _layouts/

  • default.html

• _sass/

  • _variables.scss
  • _mixins.scss
  • _base.scss

• assets/

  • css/

    • main.scss

• _posts/ (opcional)

  • YYYY-MM-DD-nombre-post.md

2. Crear el archivo principal main.scss

Este archivo sí se compila a CSS, por eso va en assets/css/.

---
---
@use "variables";
@use "mixins";
@use "base";

body {
  font-family: system-ui, sans-serif;
}

Las tres líneas --- son obligatorias.
Le indican a Jekyll que debe procesar el archivo.

3. Usar parciales Sass

Ejemplo: _sass/_variables.scss

$primary-color: #0d6efd;
$text-color: #222;

Ejemplo: _sass/_base.scss

body {
  color: $text-color;
}

a {
  color: $primary-color;
}

Jekyll detecta automáticamente la carpeta _sass.

4. Configurar Sass en _config.yml

Configuración mínima recomendada:

sass:
  style: compressed

Opciones disponibles:

• compressed → producción
• expanded → desarrollo

5. Incluir el CSS en el layout

En tu layout (_layouts/default.html por ejemplo):

<link rel="stylesheet" href="/assets/css/main.css">

Jekyll compila automáticamente:

main.scss → main.css

6. Usar Sass moderno @use

Jekyll soporta Sass moderno, así que evita @import.

❌ No recomendado:

@import "variables";

✅ Recomendado:

@use "variables";

Y para usar variables:

color: variables.$primary-color;

7. Variables según entorno (opcional)

Puedes cambiar estilos según entorno:

$env: "production";

@if $env == "production" {
  body {
    background: white;
  }
}

Ejecutar en producción:

JEKYLL_ENV=production bundle exec jekyll build

8. Errores comunes

❌ El CSS no se genera

• Falta el front matter (---)
• El archivo no está en assets
• El nombre empieza con _

---

❌ Los parciales no se encuentran

• Deben estar en _sass
• No incluyas la extensión .scss

9. Ventajas de usar Sass en Jekyll

• Sin dependencias extra
• Ideal para proyectos minimalistas
• Compatible con GitHub Pages
• Fácil de mantener

Resumen rápido

1. Usa _sass para parciales
2. Usa assets/css/main.scss como entrada
3. Agrega front matter
4. Configura sass en _config.yml
5. Incluye el CSS en el layout