Curso de Sass

En este vídeo veremos qué es Sass, que ventajas y posibilidades nos ofrece y por qué a pesar de los avances del estándar CSS sigue siendo una herramienta tan usada. También veremos un resumen de las principales alternativas que permitirán compilar el código desarrollado con este preprocesador, ya sea mediante los lenguajes Sass o SCSS, a código estándar CSS.

En esta clase vamos a dar los primeros pasos con Sass, sin entrar en el lenguaje, sino más bien centrándonos en lo que sería la configuración de un entorno de desarrollo para frontend que sea capaz de compilar los archivos de Sass y crear los ficheros CSS estándar, que podremos usar en una página web. Veremos cómo hacer este entorno con herramientas de NodeJS. Crearmos un sistema de compilación de Sass que nos permita live-reload.

Podemos usar herramientas frontend como es el caso de Webpack para compilar los archivos scss de Sass en código CSS estándar. En este vídeo vamos a mostrar la configuración de Webpack para realizar esta tarea, más que nada para las personas que ya usan Webpack en sus proyectos y quieren incorporar en su flujo de trabajo el preprocesador Sass.

Una utilidad bastante recomendable cuando compilamos Sass son los source maps, que nos permiten visualizar los archivos y líneas donde están los estilos en los ficheros originales .scss. Veremos cómo crearlos en Webpack.

Podemos usar simplemente Visual Studio Code, con la extensión "Live Sass Compiler" para compilar el código scss de una manera cómoda y en tiempo real, con live reload.

En este vídeo vamos a ver cómo realizar la compilación de Sass usando una herramienta llamada Mix, que pertenece al framework Laravel pero que se puede usar en cualquier tipo de proyecto frontend, aunque no uses Laravel. Permite mayor facilidad de trabajo que usar Webpack directamente.

En este vídeo vamos aprender un tipo de bucle llamado @each que resulta muy cómodo para hacer recorridos a listas y mapas en Sass, con ejemplos prácticos de utilización.

En este vídeo veremos una rápida introducción al mundo de los preprocesadores, viendo alternativas a Sass. Luego veremos cómo compilar con Codekit, un programa solamente disponible en MacOS.

En este vídeo veremos qué son las variables en Sass. Aprenderemos a crear y usar variables. Además veremos que con las variables podemos hacer cálculos para crear unas variables en función de otras, por medio de operadores básicos e incluso funciones incorporadas en Sass.

Los imports nos permiten dividir el código en diversos archivos, con lo que podremos comenzar a realizar una estructura de nuestro proyecto, lo que nos aporta beneficios como la posibilidad de reutilización y la mantenibilidad.

Comenzamos a trabajar con algunas de las funcionalidades más utilizadas a la hora de organizar el código CSS mediante Sass, con la posibilidad de utilizar declaraciones, crear especializaciones de los estilos y muchas otras utilidades.

Veremos cómo declarar mixins en Sass con @mixin y cómo invocarlos con @include. Se mostrará también cómo usar parámetros en los mixin, incluso valores predeterminados en los parámetros.

En un proyecto ya con HTML aplicamos CSS explicando cómo aplicar buenas prácticas a la hora de usar Sass, sacándole el mayor partido y mejorando la consistencia del diseño.

Veremos cómo hacer varios parámetros en los Mixin y cómo usar @content para aceptar contenidos de bloque.

Comenzamos en vídeo aprendiendo a usar condicionales en el lenguaje SCSS, con algunos casos prácticos. Luego aprenderemos también a crear repeticiones (bucles).

Veremos un ejemplo de bucle que genera una cantidad de clases para manejar un sprite de banderas del mundo, apoyados en listas. Además aprenderemos a crear funciones en Sass, que tienen la capacidad de devolver valores. También aprenderemos a usar mapas, clave / valor.

En este vídeo hacemos un espacio para formular preguntas sobre Sass y daremos respuestas a todas ellas.