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

David Bojo Romero

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.
Nivel de experiencia
Principiante
Temática
Theming
Versión de drupal
10
9
8
7
Idioma
Castellano