Con esta charla pretendemos aportar nuestra experiencia usando Sass con su última versión Dart-Sass junto con Gulp 4 como opción para generar el CSS en nuestro theme de Drupal. Lo que vamos a ver, principalmente mediante ejemplo práctico:
¿Qué son los preprocesadores CSS? ¿Cuáles son los principales?
¿Son necesarios los preprocesadores o podemos hacer lo mismo con CSS puro?
Pros y contras.
Futuro próximo.
¿Qué necesitamos para empezar a generar CSS con SASS?
Node/NPM (NVM)
Package.json
Plugins: Dart-Sass, autoprefixer, gulp 4, ...
Gulp tasks (compilar sass, limpieza css, sourcemaps, ...)
Ejemplo práctico con SASS en un theme de Drupal:
Ejemplo de estructura y organización.
Partials.
Variables.
Nesting.
Functions.
Mixins.
Herencia / Placeholders.
Interpolación.
Maps.
Trabajo con Custom properties/Css variables.
Principales novedades con Dart-Sass:
Module System
@use (en lugar de @import)
@forward
@extend (diferencia respecto a node-sass)
Funciones del core de Sass con módulos nativos: sass:color, sass:list, sass:map, sass:math, ...
Migrar nuestro código de Node-Sass a Dart-Sass.
Al finalizar se dejará unos minutos para preguntas/sugerencias de los asistentes.
Ponente: David Bojo Romero