¿Cómo manejar los estilos CSS y SCSS en una aplicación Svelte?

¿Cómo añadir estilos en Svelte?

Una vez más, Svelte sorprende por su sencillez. Al igual que pasa con el código HTML. Recuerda que un archivo Svelte hasta ahora habíamos visto dos bloques, el <script> y el propio html:

<script>
    /* Código JS aquí */>
</script>

<p>Aquí irá tu fantástico HTML 😉</p>

Ahora entra en escena el <style>:

<script>
    /* Código JS aquí */>
</script>

<p>Aquí irá tu fantástico HTML 😉</p>
<style>
    p {
        color: green;
        font-family: 'Comic Sans MS', cursive;
        font-size: 3em;
    }
</style>

Es importante destacar que estas reglas tienen como alcance el componente. Es decir, no cambiaría los estilos de los párrafos <p> en ninguna otra parte de la aplicación.

Entonces, si tenemos otro componente hijo, con un párrafo, por ejemplo tenemos el siguiente componente llamado Hijo.svelte:

<!-- Hijo.svelte -->
<p>Esto es un componente hijo</p>

Y el código anterior:

<script>
    import Hijo from './Hijo.svelte';
</script>

<p>Aquí irá tu fantástico HTML 😉</p>
<Hijo />
<style>
    p {
        color: green;
        font-family: 'Comic Sans MS', cursive;
        font-size: 3em;
    }
</style>

El resultado sería la línea Aquí irá tu fantástico HTML 😉 de color verde pero no afectaría al párrafo del componente hijo.

Estilos globales

Vale. Este concepto espero haya quedado claro. Los estilos de un componente sólo tienen alcance dentro de sí mismo, no afecta al resto. Pero… ¿y si quiero estilos globales de CSS en toda mi aplicación?

A fin de no repetir código CSS en todos los componentes, es muy recomendable usar estilos globales para mantener una armonía general. Por ejemplo, tener todos los enlaces de un mismo color.

En Svelte esto también es muy sencillo. Nos creamos un archivo CSS en nuestra carpeta src (por ejemplo estilo.css) y lo importamos en nuestro App.svelte de la siguiente forma:

<!-- App.svelte -->
<script>
    import './estilo.css';
</script>

<p>Mi párrafo de ejemplo con un <a href="#">enlace</a>.</p>

/* src/estilo.css */

a {
    color: green;
}
a:hover {
    color: red;
}

De esta forma tan sencilla tendrías estilos globales para toda tu aplicación y no necesitarías definir el color de los enlaces en cada componente 😜

Usar preprocesadores de CSS

Pero… ¡que es un preprocesador?

Los preprocesadores CSS son herramientas para los desarrolladores de sitios web que traducen un código de hojas de estilo no estándar (SASS/SCSS/LESS…) a un código CSS estándar, entendible por los navegadores.

Vamos a ver como usar SCSS con Svelte.

¿Qué es SCSS?

SCSS es un procesador CSS. Así de fácil. Es un con CSS vitaminado 🚀

Ventajas de SCSS

El uso de SCSS tiene, a mi modo de ver, ciertas ventajas:

• Reduce el tiempo para crear y mantener el CSS.
• Permite tener una organización modular de los estilos (vital para proyectos grandes).
• Proporciona estructuras avanzadas, como variables, listas, funciones y estructuras de control.
• Permite generar distintos tipos de salida, comprimida, normal o minimizada, trabajando tanto en desarrollo como en producción, además se hace una forma muy fácil.
• Comunidad muy importante de usuarios.

Desventajas de utilizar SASS

Pero no todo es bonito, SASS tiene algunas desventajas (pero nada alarmantes):

• Hay que aprender a utilizar una nueva herramienta, lo que para algunos supone una desventaja.
• Hay un tiempo de consumo en el proceso de generación o compilación del CSS, sobre todo si es el archivo SCSS es muy grande. No es mucho tiempo, pero sí que existe esa pequeña demora.
• Tiene una sintaxis más compleja que CSS.

Instalar dependencias

Necesitamos instalar un par de dependencias, nada complicado:

npm install svelte-preprocess node-sass

Y hacer un par de cambios en nuestro rollup.config.js:

// importamos la librería
import preprocess from 'svelte-preprocess';

/* ... */

// ... y añadimos el "preprocess" como un plugin:
export default {
  /* ... */
  plugins: [
    svelte({
      /* ... */
      preprocess: preprocess()
    })
  }),
  /* ... */
}

Guardamos cambios y hacemos la prueba de antes, pero con SCSS.

<!-- App.svelte -->
<script>
    import './estilo.scss';
</script>

<p>Mi párrafo de ejemplo con un <a href="#">enlace</a>.</p>

/* src/estilo.scss */

a {
    color: green;
    &:hover {
        color: red;
    }
}

Nota la diferencia entre CSS y SCSS del ejemplo anterior y este 😌 Esto es sólo una pincelada de SCSS, pero te invito a que revises la documentación oficial de SASS y te enamorarás y no podrás dejar de usar preprocesadores.

Tienes más artículos del curso de Svelte 👉🏻 aquí 👈🏻.

Y esto es todo. Espero que te pueda servir 🙃