📹

No olvides poner a grabar la clase

Diplomatura
FullStack
 Temario

● Sass herramientas

○ Variables

○ Maps

○ Mixins

○ Extends

○ Operaciones
Herramientas
 Herramientas

Los preprocesadores CSS no simplifican la sintaxis de CSS y

nada más. Cuentan también con un set de características

notables, cercanas a un lenguaje de programación, que vale

la pena destacar ya que podremos escribir una lógica más

limpia y menos repetitiva que la nativa de CSS.

 Herramientas

Veamos, a continuación, algunas de las características más

importantes que encontraremos en un Preprocesador CSS

y de las cuales podremos sacar mucho provecho.

 Variables

Si bien ya son parte de CSS convencional, el poder definir una

variable, implica almacenar un valor bajo un nombre amigable y

reutilizarlo en cualquier parte de nuestro código.

Al igual que en los lenguajes de programación, ahorraremos mucho

tiempo y código.
 Variables

Veamos un ejemplo de variables

declaradas dentro de Sass. 👉

Luego, las variables aplicadas. 👉

Maps
 Maps

Declaración
Un mapa en Sass es un tipo de dato que permite
almacenar una serie de pares clave-valor. Es similar a un
diccionario en otros lenguajes de programación.

En Sass, los mapas se definen utilizando la función map() y

se pueden usar para almacenar y acceder a información
estructurada, como colores, fuentes, tamaños, entre otros.
LLamado
Los mapas son útiles porque permiten organizar
información de manera lógica y fácilmente accesible, y
también pueden ser manipulados y transformados
mediante diversas funciones y operaciones.
 Extend

Muchas veces, al estar escribiendo código css,

encontramos la necesidad de replicar estilos

que, quizás, fueron ya generados en otra clase

y sumarlos a la nueva que creamos.

 Extend

Sass nos permite, a través de los extends,

traer esas clases de manera mucho más

simple.
Mixins
 Funciones, mixins y prefixing

Las funciones y los mixins ayudan a evitar el código

duplicado, además de que podremos evitar definir todo

el tiempo prefijos propietarios de cada navegador web.

 Mixins

Los Mixins permiten definir estilos que pueden ser

reutilizados. También pueden recibir argumentos los

cuales permiten producir variedades de estilos en

simples líneas.

Por lo tanto, tenemos Mixins con parámetros y sin ellos.

 Mixins con parámetros

Todo @Mixin debe ser nombrado para poder ser

incluido en Sass.

Dentro de este, y al igual que un lenguaje de

programación, se generan bloques de código los

cuales van variando según el parámetro que se le

asigna.
 Mixins con parámetros

El mixin funciona cuando se lo llama dentro de un

selector con la palabra reservada @include.

 Mixins sin parámetros

El @mixin sin parámetro es muy similar a @extend.

Sin el uso de parámetros, el mixin es simplemente un

bloque de código independiente que nos ayudará a

sumar código más rápido.

Operaciones
 Operaciones

Sass nos permite generar operaciones

rápidamente. Muchas veces las usamos para

modificar medidas de manera precisa, o cualquier

otra cosa que necesitemos, siempre y cuando

elijamos bien el símbolo aritmético.

 Funciones y prefixing

Como podemos ver, la estructura y lógica de una

función Sass se asimila bastante a la de cualquier

lenguaje de programación.

Y por aquí, vemos la función aplicada. 👉

Directivas de control
 Directivas de control

Sí, Sass propone una serie de directivas/funciones, que

son las que lo acercan mucho a ser un lenguaje de

programación, o pseudolenguaje de estilo, como también

se lo suele llamar.
 Directivas de control

Dentro de estas, podemos destacar a la función if().

La misma nos ayudará a decidir, mediante un

argumento, si la hoja de estilos debe incluir uno u otros

estilos específicos según la condición evaluada.

 Directivas de control

También tenemos una directiva @if, que se ocupa de evaluar una expresión e

incluir, por ejemplo, los estilos definidos en su interior siempre que la misma

devuelva un valor distinto a false o null.

Directivas de control

@if, también puede ir acompañada de

@else, logrando así que si la primera

expresión evaluada da como resultado false

o null, entonces tomaremos el camino

alternativo, propuesto por else.

Directivas de control

Sí sí, también tenemos la

posibilidad de iterar un ciclo, de la

mano de la directiva @for.

Directivas de control

También existe la directiva @while para

repetir indefinidamente un estilo, hasta que

la expresión de como resultado false.

Si bien se utiliza poco, es efectiva para

crear bucles más avanzados que los que

podríamos crear utilizando @for.

 Actividad

Nos toca aplicar SASS en el proyecto.

La actividad consiste en aplicar en un proyecto a modo de prueba todo lo visto

hasta el momento.

Algunos datos a considerar:

-Revisar siempre la ejecución y los comandos aplicados.

-Tener en cuenta la metodología de SASS, utilizar nesting, partial y animarse

a aplicar variables.
¿Dudas o preguntas?
Muchas gracias