Taller de SASS - KIT - PREPROS

Realizamos este taller no solo con la intención de seguir los principios propuestos por HCD para formarnos y actualizarnos tecnológicamente dentro de la empresa, también con el propósito de hacer que nuestro trabajo nos motive y sea cada vez más valioso, más importante y más útil.

SASS

Comenzar a usar SASS supuso un cambio muy significativo a la hora de definir la arquitectura CSS de un proyecto; un cambio de mentalidad donde todo se ve mucho más claro y estructurado.

La posibilidad de crear una arquitectura CSS basada en una lógica amigable, en la que cada elemento cobra más sentido por su caracter reutilizable, abre un mundo de nuevas posibilidades.

También nos ha obligado a pensar más sobre esa lógica, nos ha vuelto más imáginativos frente a determinados problemas en la maquetación y con ello ha conseguido que el trabajo de maquetar cobre una dimensión mucho más grande y mucho más divertida.

En definitiva, frente al escenario antiguo y convencional de trabajo con CSS, SASS nos orienta a trabajar sobre una base de hojas de estilo scss, una base viva, que con muy poco esfuerzo, consigue que hagamos pantallas mucho más rápido en un marco de trabajo optimizado y reutilizable.

¿Que es sass?

Sass es una extensión de CSS que permite el uso de variables, reglas CSS anidadas, mixins, importación de hojas de estilos y muchas otras características, al tiempo que mantiene la compatibilidad con CSS

Ventajas de sass

  • Superpoderes CSS
  • Estructuración de las hojas de estilo
  • Facilidad para su mantenimiento
  • Reutilización y limpieza del código
  • Ayuda a dotar de semántica los proyectos
  • Incentiva la imáginación cuando maquetamos

¿Porqué se usa?

Existen varios precompiladores de código CSS que podemos usar, como pueden ser: Less, Stylus, entre otros, pero SASS es el más completo de todos ellos a día de hoy, y también se está convirtiendo en el más popular por el soporte de su comunidad.

KIT

El uso de kit nos ayuda a generar el HTML de siempre pero mucho más organizado.

¿Que es kit?

Es un lenguaje que nos permite tener archivos con extensión .kit que podemos importar para generar un HTML final y además hacer uso de variables para mejorar la organización.

Cuando por ejemplo estamos realizando una web con muchas pantallas que comparten un mismo menú de navegación, kit nos permite tener un archivo compartido nav.kit(o como queramos nombrarlo) que podemos llamar desde cada una de las pantallas sin necesidad de tener que duplicarlo. Modificandolo una sola vez, se hace efectivo en todo el proyecto.

<header class="header">
	<!-- @import nav.kit -->
</header>

 

El resultado final siempre es un HTML estandar:

<header class="header">
   <nav> Código HTML propio del menú </nav>
</header>

 

Ventajas de kit

  • Reutilización de código
  • Estructuración de componentes
  • Creación de variables

¿Porqué se usa kit?

Volvemos al concepto de reutilización, no repetimos elementos, los definimos una vez y los llamamos desde el lugar que necesitemos, bien a través de archivos .kit o bien a través de variables como en el siguiente ejemplo:

  //Variables definidas en head.kit  
  <!-- @path_js  : js/ -->
  <!-- @path_css : css/ -->
  <!-- @path_img : img/ -->

  // Imágen definida en header.kit
  <img class="img" src="<!-- @path_img -->logo.png">

PREPROS

Cuando usamos SASS o KIT necesitamos transformar sus directivas en el resultado final que buscamos, bien una hoja css o bien un archivo html final en nuestro caso.

¿Que es prepros?

Prepros es la herramienta que además de realizar la compilación,también nos permite configurar cómo y donde queremos que se generen nuestros HTML o nuestras CSS.

Nos muestra cualquier error que pueda existir en SASS o KIT de una manera clara y fiable.

¿Ventajas de prepros?

  • Automatización de procesado de archivos
  • Control de errores
  • Servidor propio

¿Porqué se usa prepros?

El motivo principal es la comodidad para generar archivos y controlar errores, sin necesidad de tener una consola de comandos y al mismo tiempo haciendo uso de una interfáz reálmente amigable y de uso muy sencillo.

También tiene un servidor LOCALHOST propio que nos permite testear el resultado sin necesidad de instalar un servidor tipo XAMP.