21 de mayo de 2020

Vídeos del curso Sass (Formación acens)

Sass es un metalenguaje de CSS, es decir, un lenguaje que posteriormente se convertirá a CSS para que los navegadores puedan interpretarlo.

Introducción

Las bondades de Sass frente a CSS son grandes. En primer lugar, es un lenguaje anidado, y a diferencia de en CSS, puedes declarar elementos dentro de otros, de forma piramidal. De este modo, como explicamos en los vídeos del curso, podemos ordenar y organizar nuestro código de un modo mucho más eficiente y sencillo.

Primeros pasos

Para trabajar con Sass necesitamos de alguna manera convertir todo nuestro código CSS entendible por cualquier navegador. En este caso vamos a utilizar Prepros, porque para empezar es maravilloso, es muy sencillo y fácil de utilizar. También vamos a ver una de las principales características de estos preprocesadores CSS como Sass, Less, Stylus, etcétera, que es el anidamiento, cómo funciona, cómo se organiza el código en nuestros archivos de Sass. Y por último, vamos a empezar a toquetear un poquito las variables.

Mixins y herencia

Una de las mayores ventajas Sass y de este tipo de lenguajes es que podemos añadirle una pequeña capa programática a nuestro código de etiquetas. En este caso vamos a hablar de los Mixins, que serían una especie de funciones con las cuales yo voy a poder almacenar algún código y quiero que se repita en varios sitios, incluso pudiendo meterle parámetros. También vamos a hablar un poquito de qué es la herencia, que en este caso se llama @extend, y cómo funciona.

Bucles

Como decíamos en vídeos anteriores, Sass nos permite añadir una pequeña capa de programación a nuestro código para hacer que sea mucho más sencillo, ordenado y eficiente, el escribir hojas de estilo muy grandes. En este caso vamos a ver los bucles, como son el @for, el @while y el @each, y los condicionales, como son el @if y el @else. Ya veréis que son maravillosos y nos van a ayudar muchísimo.

Colores

Sass tiene muchas funcionalidades y características que son un poquito complejas, pero que son muy útiles dependiendo del caso para las que necesites. En este caso vamos a hablar de las propiedades asociadas a los colores. No es algo muy habitual, aunque todo el mundo utiliza colores en sus diseños, pero en este caso vamos a ver algunas funcionalidades más específicas, como es poder crear escalas de color, poder mezclar varios colores, buscar el color inverso, hacer ajustes sobre un color para sacar varios matices… Como veis, muy interesante.

Consola Dart y Webpack

¿Te imaginas poder trabajar en cualquier entorno sin preocuparte por tener un compilador de Sass ejecutándose a la vez? Pues para eso existe la posibilidad de compilar Sass directamente desde consola. Hay varios métodos y varias formas. Vamos a verlas, son maravillosas y nos van a ayudar un montón.

Mira otros cursos en la web de Formación acens