Usando Susy en Magento 2
Mil perdones por la espera. Casi un año sin escribir un post…
Con el desarrollo de un nuevo proyecto en Magento 2 puede surgir la necesidad de añadir un grid system a un template. Una buena alternativa en lugar de recurrir a frameworks como Bootstrap o Foundation es usar Susy, un motor para generar layouts personalizados con SASS
Prerrequisitos
-
Node JS — http://nodejs.org
-
Bower — http://bower.io
-
Gulp Js — http://gulpjs.com
Cuento con la premisa de que no se está utiliando el compilador de LESS de Magento 2 en favor de Gulp y SASS, utilizando un Gulpfile propio o el fantástico módulo Frontools de Snowdog. Podéis encontrar información sobre como trabajar con SASS en Magento 2 en Magento Dev Docs y Magento Forums.
Instalando los paquetes de Bower
Nos situamos desde el terminal en la raiz del proyecto.
bower install susy --save
La nueva estructura del proyecto es la siguiente:
Podemos ver como en la estructura aparece una nueva carpeta “bower_components”
Si deseamos poder utilizar las funciones de breakpoint de Susy:
bower install breakpoint-sass --save
Ahora sólo nos queda añadir los paquetes a nuestro styles.scss
//Si no se usa Frontools la ruta puede variar
@import "../../../bower_components/susy/sass/susy";
//Si se han instalado breakpoint
@import "../../../bower_components/breakpoint-sass/stylesheets/breakpoint";
Listo! Con esto ya se puede compilar ficheros SASS con gulp usando Susy.
Corrección: La idea de mantener los componentes de Bower en la raíz del proyecto no es la mejor. Se puede crear un módulo para Bower y usar el parámetro “module” en el themes.json. Así se evita usar las rutas con “../../../”. Gracias a Bartek Igielski por el apunte.
Fuentes: Susy Sass