Curso de Sass

Taller de preprocesadores CSS: Sass
Material disponible
Intermedio
17 Clases 8 h
Los preprocesadores CSS tienen un gran peso en el desarrollo front-end actual. Cualquier profesional que trabaje con CSS debería utilizarlos, o por lo menos conocerlos, no solo por permitir una mayor productividad a la hora de escribir el CSS, sino porque  permiten mejorar la mantenibilidad del código.

Si conoces las ventajas que te pueden proporcionar los preprocesadores CSS no necesitarás más palabras para saber hasta qué punto te serían útiles en el desarrollo de sitios web. Si no los conoces te quedarás sorprendido y te llegarás a preguntar "¿Cómo pude pasar tanto tiempo sin ellos?".

Para todos los profesionales que se dedican al front-end hay una cosa cierta: antes o después acabarán necesitando usar un preprocesador. Para comenzar ya mismo a experimentar todas sus ventajas tan solo tienes que invertir unas horas con este curso y transformar el modo con el que codificas tus CSS.

Este Curso de Sass te proporciona los conocimientos necesarios para ganar precioso tiempo en tu día a día y en cada proyecto, por pequeño que sea. Encontrarás un primer bloque de clases para aplicar Sass por medio de diversas herramientas y con distintos flujos de trabajo. Posteriormente, en un segundo bloque, encontrarás un taller completo desde cero para aprender el preprocesador, repleto de consejos y guías de buenas prácticas para su correcta aplicación.

Qué aprenderé en el Curso de Sass

  • Instalar Sass y trabajar con diversas herramientas para la compilación en CSS
  • Sintaxis de Sass
  • Variables, extend, placeholder, mixins, Listas...
  • Bucles, Ciclos y Condicionales en Sass
  • Funciones de Sass. Crear tus propias funciones.
  • Arquitectura de tu proyecto CSS

Objetivos del curso

El objetivo es que el alumno sea capaz de trabajar con Sass, el preprocesador CSS más extendido. Este Curso de Sass que permitirá beneficiarte de la productividad y potencia que deseabas al crear el código de las Hojas de Estilo en Cascada. Una vez finalizado el curso el estudiante tendrá los conocimientos necesarios para trabajar fluidamente e incorporar Sass en cualquier tipo de proyecto, mediante diversos flujos de trabajo.

Pero además de aprender Sass, este curso también permitirá al estudiante entender cómo organizar el código de las CSS para llegar a una arquitectura más adecuada, aplicando buenas prácticas que ayudarán a la mantenibilidad del código.

El curso se divide en dos partes fundamentales: En la primera aprenderemos a instalar Sass y aplicar diversos flujos de trabajo con Sass, basados en herramientas diversas como Webpack o programas de interfaz gráfica para el compilado del código SCSS. En la segunda parte tendremos un taller completo en el que aprenderemos todas las utilidades que nos ofrece Sass, como las variables, mixins, funciones, partials, etc.

Por qué debes aprender Sass

Los preprocesadores te pueden ahorrar muchas horas de trabajo front-end y hacer que escribir código CSS sea una tarea más agradable, dinámica y menos repetitiva, ya que permiten disponer de todas aquellas herramientas que echas en falta cuando escribes CSS.

En este taller podrás aprender Sass el preprocesador CSS más utilizado, que se ha convertido prácticamente en un estándar gracias al enorme apoyo de la comunidad de desarrolladores.

En este curso no nos limitaremos solamente a conocer el lenguaje SCSS, sino también a aplicar Sass en diversos entornos y flujos de trabajo, para que puedas comenzar a usar Sass fácilmente en la mayoría de los tipos de proyectos. Además, el taller práctico podrás asimilar las buenas prácticas para la mantenibilidad del código CSS.

Después de hacer el curso verás lo sencillo que es empezar a usar Sass y en un corto plazo agradecerás tener al preprocesador entre tus herramientas de desarrollo habituales, ya sea para optimizar tus flujos de trabajo como para conseguir que tu código CSS sea más mantenible, mejorando sensiblemente la experiencia de desarrollo.

Invertir tu tiempo en aprender Sass es una de las decisiones más acertadas que puedes tomar. En tu próximo proyecto puedes trabajar mucho más rápido y disponer de una serie de técnicas que aumentarán tu productividad y facilidad con la que escribes las CSS. "¡Empieza a preprocesar, y da el cambio!"

Qué tengo que saber

Para aprovechar el Curso de Sass es necesario tener conocimientos previos de CSS. Además, durante el curso usaremos el terminal de línea de comandos para realizar la compilación de los archivos de Sass a CSS estándar, por lo que será interesante tener unos conocimientos básicos de manejo del terminal.

Clases y contenidos

Qué es Sass

Comenzamos con una clase meramente teórica para saber qué es Sass, qué nos ofrece y por por qué es una buena idea usar Sass.

Introducción a Sass Gratis

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.

Instalación y compilación de Sass en diferentes entornos

Los vídeos que encontrarás a continuación te explican cómo debes instalar Sass en un proyecto web. Explicaremos las diversas maneras que tienes de trabajar con Sass, usando el propio sistema de compilación "oficial", así como diversas herramientas adicionales para mejorar tu flujo de trabajo.

Primeros pasos con Sass, instalación basada en NodeJS

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.

Compilar Sass con Webpack

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.

Crear los source maps del código CSS con Webpack

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.

Compilar Sass con Live Reload usando solamente VSCode

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.

Usar Laravel Mix para compilar Sass

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.

Recorridos con @each a listas y mapas

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.

Aprendiendo el preprocesador Sass

Estas son las clases del curso de Sass en las que vamos a aprender a usar el preprocesador. Conoceremos todas las utilidades que nos ofrece Sass, su sintaxis y la aplicación en proyectos frontend.

Introducción a los preprocesadores y compilación con CodeKit

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.

Variables en Sass

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.

Crear y realizar imports de parciales

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.

@extend, placeholders y anidaciones de Sass

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.

Introducción a los mixins de Sass

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.

Cómo sacar partido práctico a Sass y los mixin

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.

Parámetros y bloques @content en los Mixin de Sass

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

Condicionales y bucles en Sass

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).

Recursos avanzados en Sass como listas, mapas y funciones

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.

Repaso por dudas de Sass

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

Valoraciones

Toni Soriano

Buen curso para aprender Sass y organizar el CSS de los proyectos.

Pablo GP

Rubén Cazorla

Francisco Villar

Ricardo Bermudez

Me gusto este curso

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 170 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete