¿SASS o CSS puro? Un ejemplo de uso en Drupal con Dart Sass y Gulp 4

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.