Usa el compilador compass para usar sass en un tema de Drupal
Como puedes ver este sitio tiene una maquetación muy muy sencilla. Poco a poco la voy mejorando y voy documentado todos los pasos. Si quieres ver todo lo que estamos haciendo, tienes aquí unas entradas sobre ello!
Un resumen muy rápido sería: Este sitio web comienza con el tema por defecto de Drupal, Oliveroo. Después hemos usando Bootstrap5 para crear un subtema propio para configurar una entidad visual propia.
En este nuevo paso lo que vamos a hacer es integrar Sass en nuestro tema para realizar la gestión de los estilos de una forma más moderna, eficiente y limpia. Para ello hay un montón de formas pero hoy vamos a usar el gestor/compilador/framwork sass Compass
Si ya sé que Bootstrap5 ya tiene integrado Sass y lo puedes compilar directamente con Sass nativo!. Pero no me gusta mucho así que hoy lo comentaré con Compass :D
Como requerimiento solo te diría 2, ruby y la extensión gem. Porqué, porque este framework está escrito en ruby así que... no hay mucho más que explicar! jajaja
Instalación de Compass
Se instala como cualquier otro paquete en los sistemas Ubuntu - Debian. Sería:
# Actualiza tu versión de la extensión gem gem update --system# Instala el paquete gem install compass
Añadir Compass a nuestro tema Drupal
También es muy muy sencillo. Simplemente creamos nuestro proyecto compass dentro del tema y aplicamos alguna configuración custom para nuestro tema. Sería:
- Accedemos al directorio donde tenemos alojado nuestro tema custom. Estilo /themes/custom/mi_tema_custom
# Crear tu proyecto de Compass dentro del tema compass init- Verás varios directorios y ficheros que se han creado. Puedes configurar tu rutas de css y js en el fichero config.rb
# Aquí te dejo un ejemplo del fichero config.rb require 'compass/import-once/activate' # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "custom_css" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed output_style = :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass- Listo!!
Ejecutar la compilación de los ficheros
Una peculiaridad que me gusta de Compass es que tiene la opción de "Hotload" por lo que te compila en tiempo real todos tu ficheros para saber el resultado. Para ello ejecuta:
# La opción --pull es para que si te quedan los procesos abiertos, no cree uno nuevo de cada vez y no te rebiente el equipo! :D
compass watch --poll
Recuerda que si creas nuevos ficheros .css debes añadirlos a tu fichero .libraries.yml porque si no Drupal no te los leerá!
