SASS APLICACION

EXTEND

Bloque de codigo fijo que reutilizamos

Declaracion ➡️ %nombre { propiedad : valor}

Uso ➡️ .clase { @extend nombre}

MIXIN

Bloque de codigo en el que puedo colocar pametros diferentes

Declaracion ➡️ @mixin nombre ($variable1, $variable2, $variable3) { propiedad: $variable1; propiedad: $variable2, propiedad: $variable3;}

Uso ➡️ .clase { @include nombre (valor1, valor2, valor3); propiedad: valor; propiedad: valor;}

LISTA

Lista de valores

Declaracion ➡️ $nombre_de_lista: valor1, valor2, valor3;

Uso ➡️ selector { propiedad: nth($list: $nombre_de_lista, $n: (posicion en la lista) );

MAP-GET

Coleccion de variables

Declaracion ➡️ $nombre_de_mapa: ( nombre: key, nombre: key, nombre: key)

Uso ➡️ propiedad : map-get($map: (nombre del mapa), $key: (valor) );

BUCLE EACH

Secuencia que se repite, cuando deja de cumplirse se termina

Bucles con listas

Declaracion ➡️ @each $variable-iterador, $variable-valor in $nombre-lista{ .clase-#{$variable-iterador}{ propiedad: $variable-valor; } //uso de calc que es mas moderno

Resultado ➡️ .clase-variable { propiedad : valor }

CONDICIONAL

Evalua el valor de una variable para la aplicacion de estilos, no es una interaccion con el usuario, la variable a evaluar debe ser modificada manualmente. Se puede colocar tantos if else como se necesite, se abre con un @if y se cierra con un @else

Declaracion ➡️ $variable : valor-x; @if($variable == valor) { selector { propiedad : valor; }@else if ($variable == valor){ selector { propiedad : valor; }@else { selector { propiedad : valor; }