¿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.