Configuración moderna con Dart Sass usando jekyll-sass-converter y sass-embedded en Jekyll
Jekyll tiene soporte nativo para Sass, por lo que no necesitas configurar un procesador de Sass por separado. Al instalar Jekyll, las dependencias necesarias para procesar hojas de estilo Sass forman parte de su ecosistema.
Jekyll delega la conversión de Sass en la gema
jekyll-sass-converter, que se encarga de transformar archivos.sassy.scssen CSS durante el proceso de build.
Las principales gemas involucradas en esta cadena, junto con sus versiones vigentes al momento de publicar o actualizar este post (consultadas en RubyGems), son:
1. Estructura y configuración del proyecto
Para crear la estructura mínima de un proyecto y comenzar con las pruebas, podemos generarla desde la línea de comandos, siempre que tengamos instalada la gema jekyll y pasarle el parámetro --blank que evita crear scaffolding innecesario de archivos:
1
jekyll new --blank <nombre-proyecto>
Si no tienes la gema instalada, puedes clonar este proyecto, que contiene la misma base y estructura mínima de archivos.
Al abrir el proyecto debes tener al menos, los siguientes archivos:
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>{{ page.title }} - {{ site.title }}</title>
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
</head>
<body>
{{ content }}
</body>
</html>
$backgroundColor: #ffffff;
$bodyColor: #000000;
$bodyFont: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
body {
background: $backgroundColor;
color: $bodyColor;
font-family: $bodyFont;
}
---
---
@import "base";
url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "" # the subpath of your site, e.g. /blog
title: "" # the name of your site, e.g. ACME Corp.
---
layout: default
title: "Happy Jekylling!"
---
## You're ready to go!
Start developing your Jekyll website.
Selecciona un archivo para ver su contenido
Luego, creamos un archivo Gemfile para gestionar las dependencias del proyecto. Por ejemplo:
1
2
3
4
5
# frozen_string_literal: true
source "https://rubygems.org"
gem "jekyll", "~> 4.3"
Asegúrate de especificar una versión de Jekyll igual o superior a la
4.3, ya que las versiones antiguas pueden no implementar correctamente las reglas y características modernas de Sass.
Después, instala las dependencias con Bundler (Gestor de dependencias):
1
bundle install
De esta forma, Bundler se encargará de instalar Jekyll junto con todas las gemas y dependencias necesarias para ejecutar el proyecto, resolviendo automáticamente las dependencias entre ellas y dejando las versiones utilizadas registradas en Gemfile.lock.
Por último, puedes ejecutar el servidor de desarrollo usando el comando:
1
bundle exec jekyll serve
2. Organizar los parciales y el archivo principal de Sass
La carpeta _sass es para organizar los parciales. Por ejemplo:
_sass/-
_variables.scss -
_mixins.scss -
_base.scss
-
Por defecto, Jekyll procesa los archivos Sass que tengan Front Matter y estén dentro del directorio fuente del sitio. El lugar que se suele utilizar es el siguiente:
assets/css/-
main.scss
-
Este archivo sí se compila a CSS, por eso va en assets/css/ y se usa para cargar otros archivos. Por ejemplo:
1
2
3
4
---
---
@use "base";
Las tres líneas
---son obligatorias porque le indican a Jekyll que debe procesar el archivo.
En la siguiente ilustración se pueden observar los archivos parciales de Sass y el archivo principal que actúa como punto de entrada para Jekyll.
Se puede usar @use siempre que la versión de jekyll-sass-converter sea relativamente moderna y lo permita. A partir de jekyll-sass-converter 3.0, Jekyll utiliza sass-embedded que implementa Dart Sass, y esta versión está disponible con Jekyll 4.3+.
https://jekyllrb.com/news/2022/12/21/jekyll-sass-converter-3.0-released
Siempre podemos comprobarlo abriendo el archivo Gemfile.lock o ejecutando el comando bundle info seguido del nombre de la gema. Por ejemplo:
1
2
bundle info jekyll-sass-converter
bundle info sass-embedded
A continuación, puedes observar la salida de los comandos y ver rápidamente las versiones instaladas;
Si el proyecto utiliza una versión antigua de jekyll-sass-converter, deberíamos utilizar la sintaxis tradicional con @import.
Por ejemplo, nuestro main.scss quedaría:
1
2
3
4
---
---
@import "base";
Y en _base.scss podríamos importar los demás archivos:
1
2
3
4
5
6
7
8
9
10
@import "variables";
@import "mixins";
body {
margin: 0;
font-family: $font-family-base;
color: $text-color;
background: $background-color;
}
@importy@useno funcionan exactamente igual.@useutiliza módulos y namespaces, mientras que@importcomparte variables y funciones globalmente. La diferencia entre ambos sistemas es un tema más amplio y no es el objetivo principal de este artículo, pero es importante conocerla si trabajas con proyectos antiguos.
3. Incluir el CSS en el layout
En tu layout _layouts/default.html, o en cualquier otro layout donde quieras utilizar estos estilos, debes incluir el archivo CSS generado por Jekyll:
1
<link rel="stylesheet" href="/assets/css/main.css">
Solo asegúrate de que, aunque el archivo se llame
main.scss, lo incluyas comomain.css, ya que Jekyll lo compilará automáticamente a CSS.
4. Comprimir el CSS generado
Una práctica muy recomendable es generar nuestro CSS de forma minificada, es decir, optimizando el archivo para reducir su tamaño final. En Jekyll, esto es muy sencillo, ya que solo necesitamos incluir la siguiente configuración en el archivo _config.yml:
1
2
sass:
style: compressed
Opciones disponibles:
compressedexpanded(por defecto)
Ya con eso, pasamos de tener un archivo lleno de espacios y saltos de líneas a un archivo comprimido de una sola línea:
