Eventualmente necesitaremos incluir nuestros propios estilos en nuestro sitio Jekyll, En este post es justo lo que haremos

1. Crear el archivo SASS

Vamos a crear el archivo que contenga nuestros estilos, en mi caso yo lo nombre mi-estilo.scss. Debemos guardar el archivo dentro del directorio Crear el archivo dentro del directorio _sass conteniendo nuestras reglas:

mark {
    padding: $mark-padding;
    background-color: $mark-bg;

    &.archivo {
        font-family: monospace;
    }    
}

En este caso incluí un selector anidado que usa las variables definidas por Bootstrap, las cuales agregamos en un post anterior. Nota el anidamiento que permite ver la jerarquía de nuestras reglas, cosa que no podemos hacer con CSS plano.

2. Incluir nuestras reglas en el sitio

Ahora solo nos falta “exportar” nuestras reglas, lo cual haremos en el archivo main.scss que se encuentra ubicado en el directorio assets. Agregaremos @import "mi-estilo"; (o el nombre que le hayamos dado a nuestro archivo sass) de tal forma que quede algo así:

@import "bootstrap";
@import "minima";
@import "mi-estilo";

Conclusión

Ahora ya tenemos disponible nuestras reglas de estilo personalizadas. Podemos crear tantos archivos sass necesitamos, de tal manera que:

  • Las reglas se encuentren organizadas
  • Seguir una convención de nombres
  • …

En general, recomiendo ampliamente seguir las Guías de Mozilla para el desarrollo web.