logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza: • 10. Redes Neuronales Recurrentes • 2. Python • 1. Introducción a las redes neuronales • Documentación • Lorenzo
clase:daw:diw:1eval:tema05

Diferencias

Muestra las diferencias entre dos versiones de la página.


Revisión previa
—clase:daw:diw:1eval:tema05 [2025/11/10 12:18] (actual) – [@forward] Lorenzo
Línea 1: Línea 1:
 +====== 5. SASS ======
 +SASS es un preprocesador de CSS. Es como añadir funcionalidad a CSS que no tiene pero no de cosas del navegador sino para ayudar a escribir menos CSS.
 +El código se escribe en SASS y se transforma en CSS. Permite bucles, funciones, variables ,etc.
 +
 +<note tip>
 +Actualmente, la implementación oficial de SASS es Dart Sass. Otras implementaciones como LibSass y node-sass ya no se mantienen y no deberían usarse en proyectos nuevos. 
 +Angular, por ejemplo, usa Dart Sass de forma predeterminada desde la versión 12.
 +</note>
 +
 +
 +Enlaces con mas información de SASS:
 +  * [[https://sass-guidelin.es/|Sass Guidelines]]
 +  * [[https://sass-lang.com/documentation/at-rules/mixin/|Sass: @mixin and @include]]
 +  * [[https://sass-lang.com/documentation/at-rules/function/|Sass: @function]] 
 +  * [[http://thesassway.com/intermediate/if-for-each-while|Sass control directives: @if, @for, @each and @while]]
 +    * [[https://sass-lang.com/documentation/at-rules/control/if|Sass: @if and @else]]
 +    * [[https://sass-lang.com/documentation/at-rules/control/for|Sass: @for]]
 +    * [[https://sass-lang.com/documentation/at-rules/control/each#with-maps|sass: @each with maps]]
 +  * [[https://teamtreehouse.com/community/-can-someone-tell-me-how-i-can-install-sass-on-windows-by-nodejs-httpnodejsorg|Instalar SASS en node]]
 +  * [[https://sass-lang.com/|Página del lenguaje SASS]]
 +  * [[https://sass-lang.com/guide| Guía básica de SASS]]
 +  * 
 +Curso de SASS:
 +  * [[https://www.chucksacademy.com/es/topic/css-preprocessors|Preprocesadores de CSS]]
 +
 +
 +
 +===== Variables =====
 +Las variables en SASS empiezan por el símbolo $.
 +
 +<sxh sass>
 +$font-main: Helvetica, sans-serif;
 +$primary-color: #E4A23F;
 +
 +
 +body {
 +  font-family: $font-main;
 +  color: $primary-color;
 +}  
 +  
 +</sxh>  
 +  
 +Se transforma en
 +
 +<sxh css>
 +body {
 +  font-family: Helvetica, sans-serif;
 +  color: #E4A23F;
 +}
 +</sxh>
 +
 +
 +===== Arrays  =====
 +Veamos ahora como usar los arrays
 +
 +  * Para acceder a un elemento de un array se usa la función ''list.nth''. **El índice empieza por 1 y no por cero**. 
 +<sxh sass>
 +@use "sass:list";
 +
 +$lista:(10px,12px,20px,40px);
 +
 +$primero: list.nth($lista, 1);
 +</sxh>
 +
 +  * Para obtener el tamaño de un array se usa la función ''length'':
 +<sxh sass>
 +@use "sass:list";
 +
 +$lista:(10px,12px,20px,40px);
 +
 +$tamanyo:list.length($lista);
 +</sxh>
 +
 +===== Mapas  =====
 +Veamos ahora las funciones de maps
 +
 +  * Para acceder a un elemento de un map se usa la función ''map-get'':
 +
 +
 +<sxh sass>
 +@use "sass:map";
 +$mapa:(
 +    "a": enero,
 +    "b": febrero
 +);
 +
 +$clave:a;
 +$valor:map.get($mapa,$clave);
 +
 +</sxh>
 +
 +  * Para obtener las claves de un map.:
 +
 +<sxh sass>
 +@use "sass:map";
 +$mapa:(
 +    "a": enero,
 +    "b": febrero
 +);
 +
 +
 +$keys:map.keys($mapa);
 +</sxh>
 +
 +Se obtiene un array los valores ''a'' y ''b''.
 +
 +
 +===== Bucle @for to =====
 +Se usa para hacer un bucle desde ''0'' a ''n-1''
 +
 +  * Bucle con índice.
 +<sxh sass>
 +@for $i from 0 to 4 {
 +  .g--border-#{$i} {   
 +      border: 10px * $i solid #00FF00; 
 +  }
 +}
 +
 +</sxh>
 +
 +se transforma en 
 +
 +<sxh css>
 +.g--border-0 {
 +  border: 0px solid #00FF00;
 +}
 +
 +.g--border-1 {
 +  border: 10px solid #00FF00;
 +}
 +
 +.g--border-2 {
 +  border: 20px solid #00FF00;
 +}
 +
 +.g--border-3 {
 +  border: 30px solid #00FF00;
 +}
 +
 +</sxh>
 +
 +
 +===== Bucle @for through =====
 +Se usa para hacer un bucle desde ''1'' hasta ''n''
 +
 +  * Bucle con índice.
 +<sxh sass>
 +@for $i from 1 through 4 {
 +  .g--border-#{$i} {   
 +      border: 10px * $i solid #00FF00; 
 +  }
 +}
 +
 +</sxh>
 +
 +se transforma en 
 +
 +<sxh css>
 +.g--border-1 {
 +  border: 10px solid #00FF00;
 +}
 +
 +.g--border-2 {
 +  border: 20px solid #00FF00;
 +}
 +
 +.g--border-3 {
 +  border: 30px solid #00FF00;
 +}
 +
 +.g--border-4 {
 +  border: 40px solid #00FF00;
 +}
 +</sxh>
 +
 +
 +
 +===== Bucle @each de un array =====
 +Recorre los elementos de una lista
 +
 +<sxh sass>
 +
 +$paddings:(3px,6px,7px,9px);
 +
 +@each $value in $paddings {
 +  .g--padding-#{$value} {
 +    padding: $value;
 +  }
 +}
 +</sxh>
 +
 +<sxh css>
 +.g--padding-3px {
 +    padding: 3px;
 +}
 +.g--padding-6px {
 +    padding: 6px;
 +}
 +.g--padding-7px {
 +    padding: 7px;
 +}
 +.g--padding-9px {
 +    padding: 9px;
 +}
 +</sxh>
 +
 +
 +
 +===== Bucle @each de un  Map  =====
 +Para recorrer un map la forma más sencilla es la siguiente:
 +
 +<sxh sass>
 +
 +$map:(
 +  "s":3px,
 +  "m":6px,
 +  "l":7px,
 +  "xl":9px
 +);
 +
 +@each $key,$value in $map {
 +  .g--padding-#{$key} {
 +    padding: $value;
 +  }
 +}
 +</sxh>
 +
 +<sxh css>
 +.g--padding-s {
 +    padding: 3px;
 +}
 +.g--padding-m {
 +    padding: 6px;
 +}
 +.g--padding-l {
 +    padding: 7px;
 +}
 +.g--padding-xl {
 +    padding: 9px;
 +}
 +</sxh>
 +
 +
 +
 +
 +<note tip>La sintaxis de usar una variable en SASS cuando es el nombre de una clase CSS es un poco distinta. Hay que usar lo siguiente ''#{$variable}''</note>
 +
 +
 +===== Selector Padre =====
 +El uso de "&" en SASS te permite escribir menos con el nombre de las clases, ya que el "&" se convierte en el nombre de la clase "padre.
 +<sxh css>
 +AAA {
 +  color:red;
 +  
 +  &__BBB {
 +    padding:5px;
 +  }
 +}
 +</sxh>
 +
 +se transforma en:
 +
 +<sxh css>
 +AAA {
 +  color:red;
 +}
 +  
 +AAA__BBB {
 +  padding:5px;
 +}
 +</sxh>
 +
 +
 +Mas información en [[https://css-tricks.com/the-sass-ampersand/|The Sass Ampersand]]
 +
 +
 +===== Funciones  =====
 +En SASS también existen funciones "normales" que calculan un valor.
 +
 +<sxh sass>
 +@function getBorderSize($size) {
 +  @return 10px * $size;
 +}
 +
 +.c-button {
 +  color: #FF0000;
 +  border: getBorderSize(2) solid #00FF00;
 +}
 +</sxh>
 +
 +se transforma en
 +
 +<sxh css>
 +.c-button {
 +  color: #FF0000;
 +  border: 20px solid #00FF00;
 +}
 +</sxh>
 +
 +
 +===== Mixings =====
 +Son como trozos de código CSS que puedes añadir en otra clase CSS. Es como llamar a una "función" pero con CSS. Son muy útiles para evitar repetir código CSS.
 +
 +<sxh sass>
 +@mixin box-shadow($color) {
 +  -webkit-box-shadow: 2px 10px 24px $color;
 +  -moz-box-shadow: 2px 10px 24px $color;
 +  box-shadow: 2px 10px 24px $color;
 +}
 +
 +.c-button {
 +  color: #FF0000;
 +  @include box-shadow(#FF0000);
 +}
 +
 +.c-panel {
 +  color: #00FF00;
 +  @include box-shadow(#00FF00);
 +}
 +
 +</sxh>
 +
 +se transforma en
 +
 +<sxh css>
 +.c-button {
 +  color: #FF0000;
 +  -webkit-box-shadow: 2px 10px 24px #FF0000;
 +  -moz-box-shadow: 2px 10px 24px #FF0000;
 +  box-shadow: 2px 10px 24px #FF0000;
 +}
 +
 +.c-panel {
 +  color: #00FF00;
 +  -webkit-box-shadow: 2px 10px 24px #00FF00;
 +  -moz-box-shadow: 2px 10px 24px #00FF00;
 +  box-shadow: 2px 10px 24px #00FF00;
 +}
 +</sxh>
 +
 +
 +===== @use =====
 +En versiones antiguas de SASS se usaba `@import`, pero en Dart Sass está obsoleto. 
 +Ahora se recomienda usar **@use** y **@forward**, que permiten una mejor organización del código.
 +
 +Ejemplo:
 +
 +
 +<sxh sass;title:_variables.scss>
 +$primary-color: #E4A23F;
 +$font-main: Helvetica, sans-serif;
 +</sxh>
 +
 +
 +<sxh scss;title:styles.scss>
 +@use 'variables';
 +
 +body {
 +  font-family: variables.$font-main;
 +  color: variables.$primary-color;
 +}
 +</sxh>
 +
 +Con @use se cargan los estilos de otro fichero y, para evitar conflictos, las variables se acceden con el prefijo del nombre del fichero ''nombreFichero.$nombreVariable''.
 +
 +Si quieres usar las variables directamente sin el prefijo, puedes añadir la opción as *:
 +
 +<sxh sass; title:_variables.scss>
 +$primary-color: #E4A23F;
 +$font-main: Helvetica, sans-serif;
 +</sxh>
 +
 +
 +<sxh scss;highlight: [1,4,5];title:styles.scss>
 +@use 'variables' as *;
 +
 +body {
 +  font-family: $font-main;
 +  color: $primary-color;
 +}
 +</sxh>
 +
 +===== @forward =====
 +Cuando tenemos varios ficheros con variables, mixins o funciones, 
 +puede ser pesado tener que importarlos uno por uno en cada archivo SASS.  
 +
 +Para simplificar, usamos ''@forward'', que actúa como un "reexportador".Permite centralizar varios ficheros en uno solo y luego usarlos todos de golpe.
 +
 +Además ''@forward'' hace que se incluya el CSS que se ha generado y ''@use'' no lo hace.
 +
 +Estructura de ejemplo:
 +
 +<sxh text;gutter:false>
 +  proyecto
 +  ├─ utilidades
 +  │   ├─ _colores.scss
 +  │   ├─ _fuentes.scss
 +  │   ├─ _mixings.scss
 +  │   └─ _index.scss
 +  └─ styles.scss
 +</sxh>
 +
 +Contenido de los ficheros:
 +
 +
 +<sxh sass;title:_colores.scss>
 +$primary-color: #E4A23F;
 +</sxh>
 +
 +<sxh sass;title:_fuentes.scss>
 +$main-font: Helvetica, sans-serif;
 +</sxh>
 +
 +<sxh sass;title:_mixins.scss>
 +@mixin redondeado($radio) {
 +  border-radius: $radio;
 +}
 +</sxh>
 +
 +<sxh sass;highlight: [1,2,3]; title:_index.scss>
 +@forward '_colores.scss';
 +@forward '_fuentes.scss';
 +@forward '_mixins.scss';
 +</sxh>
 +
 +
 +<sxh sass;title:styles.scss>
 +@use 'utilidades';
 +
 +body {
 +  font-family: utilidades.$main-font;
 +  color: utilidades.$primary-color;
 +  
 +  @include utilidades.redondeado(10px);
 +}
 +</sxh>
 +
 +
 +<note important>
 +Fijarse que si creamos un fichero llamado ''_index.scss'' lo carga automáticamente. Véase [[https://sass-lang.com/documentation/at-rules/use/#loading-a-directory|loading-a-directory]]
 +</note>
 +
 +
 +Otra diferencia entre 
 +
 +===== Condicional @if =====
 +
 +<sxh sass>
 +@mixin border($size) {
 +
 +    
 +  @if $size>=3 {
 +    $color:#FF0000;
 +  } @else {
 +    $color:#00FF00;
 +  }
 +
 +
 +  border: $size*2 solid $color;
 +}
 +
 +.c-caja1 {
 +  color: #FF0000;
 +  @include border(2px);
 +}
 +.c-caja2 {
 +  color: #FF0000;
 +  @include border(5px);
 +}
 +
 +</sxh>
 +
 +se transforma en
 +
 +<sxh css>
 +.c-caja1 {
 +  color: #FF0000;
 +  border: 4px solid #00FF00;
 +}
 +
 +.c-caja2 {
 +  color: #FF0000;
 +  border: 10px solid #FF0000;
 +}
 +
 +
 +</sxh>
 +
 +
 +===== Funciones de Color =====
 +Ya existen una serie de funciones predefinidas en SASS: [[https://www.w3schools.com/sass/sass_functions_color.asp|Sass Color Functions]]
 +
 +Entre las mas útiles están:
 +  * ''color.lighten'': Incrementa la luminosidad de un color
 +  * ''color.darken'': Decrementa la luminosidad de un color
 +  * ''color.saturate'': Incrementa la saturación de un color
 +  * ''color.desaturate'': Decrementa la saturación de un color
 +
 +<sxh sass>
 +@use "sass:color";
 +
 +$color-fondo: #F456E3;
 +$color-borde: color.darken($color-fondo,30%);
 +
 +.c-caja {
 +    background-color: $color-fondo;
 +    border: 4px solid $color-borde;
 +}
 +</sxh>
 +
 +se transforma en
 +
 +<sxh css>
 +.c-caja {
 +  background-color: #F456E3;
 +  border: 4px solid #a60b95;
 +}
 +
 +</sxh>
 +
 +
 +===== Ejercicios =====
 +
 +==== Ejercicio 1 ====
 +Usando la herramienta [[https://logongas.github.io/color-schemes-generator/|Colos Chemes Generator]] vamos a generar los siguientes "nombres" de colores y sus valores:
 +  * [[https://logongas.github.io/color-schemes-generator/?p0=202-95-5&p1=205-88-16&p2=207-84-28&p3=210-81-39&p4=212-80-50&p5=215-81-61&p6=217-84-73&p7=220-88-84&p8=222-95-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|principal]]: ''#011019, #052F4D, #0B4D83, #1363B4, #1979E6, #4B8EEC, #80ADF4, #B2CAFA, #E6EDFE''
 +  * [[https://logongas.github.io/color-schemes-generator/?p0=17-95-5&p1=20-88-16&p2=22-84-28&p3=25-81-39&p4=27-80-50&p5=30-81-61&p6=32-84-73&p7=35-88-84&p8=37-95-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|alternativo]]: ''#190801, #4D1D05, #83370B, #B45613, #E67519, #EC9C4B, #F4BE80, #FADCB2, #FEF5E6''
 +  * [[https://logongas.github.io/color-schemes-generator/?p0=370-95-5&p1=367-88-16&p2=365-84-28&p3=362-81-39&p4=0-80-50&p5=3-81-61&p6=5-84-73&p7=8-88-84&p8=10-95-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|rojo]]: ''#190501, #4D0D05, #83150B, #B41813, #E61919, #EC534B, #F48A80, #FABCB2, #FEEAE6''
 +  * [[https://logongas.github.io/color-schemes-generator/?p0=205-25-15&p1=208-19-24&p2=210-15-33&p3=213-12-41&p4=215-11-50&p5=218-12-59&p6=220-15-68&p7=223-19-76&p8=225-25-85&minLightness=15&maxSaturation=25&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|gris]]: ''#1D2830, #323E49, #485461, #5C6775, #717D8E, #8A93A3, #A1A9BA, #B6BDCD, #CFD4E2''
 +  * [[https://logongas.github.io/color-schemes-generator/?p0=180-0-92&p1=180-0-93&p2=180-0-94&p3=180-0-95&p4=180-0-96&p5=180-0-97&p6=180-0-98&p7=180-0-99&p8=180-0-100&minLightness=10&maxSaturation=95&rotate-hue=0&ecuacion=constante&tasa-crecimiento=8|blanco]]: ''#EBEBEB, #EDEDED, #F0F0F0, #F2F2F2, #F5F5F5, #F7F7F7, #FAFAFA, #FCFCFC, #FFFFFF''
 +  * [[https://logongas.github.io/color-schemes-generator/?p0=45-95-22&p1=46-89-32&p2=46-85-42&p3=47-82-51&p4=47-81-61&p5=48-82-71&p6=48-84-81&p7=49-89-90&p8=49-95-100&minLightness=15&maxSaturation=95&rotate-hue=2&ecuacion=parabola&tasa-crecimiento=8|amarillo]]: ''#6D5303, #9A7809, #C69C10, #E9BC1C, #ECC94B, #F2D978, #F7E7A6, #FCF4CF, #FFFFFF''
 +
 +
 +
 +
 +Para ello crearemos la variable "$colores":
 +
 +<sxh sass>
 +$colores:(
 +  'principal': (#011019, #052F4D, #0B4D83, #1363B4, #1979E6, #4B8EEC, #80ADF4, #B2CAFA, #E6EDFE),
 +  'alternativo': (#190801, #4D1D05, #83370B, #B45613, #E67519, #EC9C4B, #F4BE80, #FADCB2, #FEF5E6),
 +  'rojo': (#190501, #4D0D05, #83150B, #B41813, #E61919, #EC534B, #F48A80, #FABCB2, #FEEAE6),
 +  'gris': (#1D2830, #323E49, #485461, #5C6775, #717D8E, #8A93A3, #A1A9BA, #B6BDCD, #CFD4E2),
 +  'blanco': (#EBEBEB, #EDEDED, #F0F0F0, #F2F2F2, #F5F5F5, #F7F7F7, #FAFAFA, #FCFCFC, #FFFFFF),
 +  'amarillo': (#6D5303, #9A7809, #C69C10, #E9BC1C, #ECC94B, #F2D978, #F7E7A6, #FCF4CF, #FFFFFF)
 +);
 +
 +</sxh>
 +
 +Genera las siguientes variables CSS:
 +
 +<sxh css>
 +
 +  --mlt-sys-principal-1: #011019;
 +  --mlt-sys-principal-2: #052F4D;
 +
 +  ...
 +  
 +  --mlt-sys-principal-8: #B2CAFA;
 +  --mlt-sys-principal-9: #E6EDFE;
 +
 +
 +
 +
 +  --mlt-sys-alternativo-1: #190801;
 +  --mlt-sys-alternativo-2: #4D1D05;
 +
 +  ...
 +  
 +  --mlt-sys-alternativo-8: #FADCB2;
 +  --mlt-sys-alternativo-9: #FEF5E6;
 +
 +
 +
 +
 +  --mlt-sys-rojo-1: #190501;
 +  --mlt-sys-rojo-2: #4D0D05;
 +
 +  ...
 +  
 +  --mlt-sys-rojo-8: #FABCB2;
 +  --mlt-sys-rojo-9: #FEEAE6;
 +
 +  
 +  
 +  
 +  --mlt-sys-gris-2: #323E49;
 +  --mlt-sys-gris-3: #485461;
 +
 +  ...
 + 
 +  --mlt-sys-gris-8: #B6BDCD;
 +  --mlt-sys-gris-9: #CFD4E2;
 +
 +
 +
 +
 +  --mlt-sys-blanco-1: #EBEBEB;
 +  --mlt-sys-blanco-2: #EDEDED;
 +
 +  ...
 + 
 +  --mlt-sys-blanco-8: #FCFCFC;
 +  --mlt-sys-blanco-9: #FFFFFF;
 +
 +
 +
 +
 +  --mlt-sys-amarillo-1: #6D5303;
 +  --mlt-sys-amarillo-2: #9A7809;
 +
 +  ...
 + 
 +  --mlt-sys-amarillo-8: #FCF4CF;
 +  --mlt-sys-amarillo-9: #FFFFFF;
 +
 +</sxh>
 +
 +Genera el siguiente código CSS:
 +
 +<sxh css>
 +.g--color-principal-1 {
 +  color: var(--mlt-sys-color-principal-1) !important;
 +}
 +.g--background-color-principal-1 {
 +  background-color: var(--mlt-sys-color-principal-1) !important;
 +}
 +.g--border-color-principal-1 {
 +  border-color: var(--mlt-sys-color-principal-1) !important;
 +}
 +.g--color-principal-2 {
 +  color: var(--mlt-sys-color-principal-2) !important;
 +}
 +.g--background-color-principal-2 {
 +  background-color: var(--mlt-sys-color-principal-2) !important;
 +}
 +.g--border-color-principal-2 {
 +  border-color: var(--mlt-sys-color-principal-2) !important;
 +}
 +
 +
 +....
 +
 +
 +.g--color-amarillo-9 {
 +  color: var(--mlt-sys-color-amarillo-9) !important;
 +}
 +.g--background-color-amarillo-9 {
 +  background-color: var(--mlt-sys-color-amarillo-9) !important;
 +}
 +.g--border-color-amarillo-9 {
 +  border-color: var(--mlt-sys-color-amarillo-9) !important;
 +}
 +</sxh>
 +
 +
 +==== Ejercicio 2 ====
 +Dado la variable "$font-sizes": 
 +
 +<sxh scss>
 +$font-sizes:(10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px, 28px, 30px);
 +</sxh>
 +
 +Genera las siguientes variables CSS:
 +<sxh CSS>
 +  --mlt-sys-font-size-1:10px;
 +  --mlt-sys-font-size-2:12px;
 +
 +  ..
 +  
 +  --mlt-sys-font-size-10:28px;
 +  --mlt-sys-font-size-11:30px;
 +</sxh>
 +
 +Genera el siguiente código CSS:
 +
 +<sxh css>
 +.g--font-size-1 {
 +  font-size: var(--mlt-sys-font-size-2) !important;
 +}
 +.g--font-size-2 {
 +  font-size: var(--mlt-sys-font-size-2) !important;
 +}
 +
 +...
 +
 +.g--font-size-10 {
 +  font-size: var(--mlt-sys-font-size-10) !important;
 +}
 +.g--font-size-11 {
 +  font-size: var(--mlt-sys-font-size-11) !important;
 +}
 +</sxh>
 +
 +
 +==== Ejercicio 3 ====
 +Dado la variable "$paddings": 
 +
 +<sxh scss>
 +$paddings:(0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px);
 +</sxh>
 +
 +Genera las siguientes variables CSS:
 +<sxh CSS>
 +  --mlt-sys-padding-0:0px;
 +  --mlt-sys-padding-1:4px;
 +
 +  ..
 +  
 +  --mlt-sys-padding-9:36px;
 +  --mlt-sys-padding-10:40px;
 +</sxh>
 +
 +Genera el siguiente código CSS:
 +
 +<sxh css>
 +.g--padding-0 {
 +  padding: var(--mlt-sys-padding-1) !important;
 +}
 +.g--padding-1 {
 +  padding: var(--mlt-sys-padding-2) !important;
 +}
 +.g--padding-2 {
 +  padding: var(--mlt-sys-padding-3) !important;
 +}
 +
 +......
 +
 +.g--padding-9 {
 +  padding: var(--mlt-sys-padding-10) !important;
 +}
 +.g--padding-10 {
 +  padding: var(--mlt-sys-padding-11) !important;
 +}
 +</sxh>
 +
 +<sxh css>
 +.g--padding-0 {
 +  margin: var(--mlt-sys-padding-0) !important;
 +}
 +.g--padding-1 {
 +  margin: var(--mlt-sys-padding-1) !important;
 +}
 +.g--padding-2 {
 +  margin: var(--mlt-sys-padding-2) !important;
 +}
 +
 +
 +.....
 +
 +
 +.g--padding-9 {
 +  margin: var(--mlt-sys-padding-9) !important;
 +}
 +.g--padding-10 {
 +  margin: var(--mlt-sys-padding-10) !important;
 +}
 +
 +</sxh>
 +
 +
 +Y el siguiente código CSS:
 +
 +<sxh css>
 +.g--padding-horizontal-0 {
 +  padding-left: var(--mlt-sys-padding-0) !important;
 +  padding-right: var(--mlt-sys-padding-0) !important;
 +}
 +.g--padding-vertical-0 {
 +  padding-top: var(--mlt-sys-padding-0) !important;
 +  padding-bottom: var(--mlt-sys-padding-0) !important;
 +}
 +.g--padding-horizontal-1 {
 +  padding-left: var(--mlt-sys-padding-1) !important;
 +  padding-right: var(--mlt-sys-padding-1) !important;
 +}
 +.g--padding-vertical-1 {
 +  padding-top: var(--mlt-sys-padding-1) !important;
 +  padding-bottom: var(--mlt-sys-padding-1) !important;
 +}
 +.g--padding-horizontal-2 {
 +  padding-left: var(--mlt-sys-padding-2) !important;
 +  margin-right: var(--mlt-sys-padding-2) !important;
 +}
 +.g--padding-vertical-2 {
 +  padding-top: var(--mlt-sys-padding-2) !important;
 +  padding-bottom: var(--mlt-sys-padding-2) !important;
 +}
 +
 +
 +......
 +
 +
 +.g--padding-horizontal-9 {
 +  padding-left: var(--mlt-sys-padding-9) !important;
 +  padding-right: var(--mlt-sys-padding-9) !important;
 +}
 +.g--padding-vertical-9 {
 +  padding-top: var(--mlt-sys-padding-9) !important;
 +  padding-bottom: var(--mlt-sys-padding-9) !important;
 +}
 +.g--padding-horizontal-10 {
 +  padding-left: var(--mlt-sys-padding-10) !important;
 +  padding-right: var(--mlt-sys-padding-10) !important;
 +}
 +.g--padding-vertical-10 {
 +  padding-top: var(--mlt-sys-padding-10) !important;
 +  padding-bottom: var(--mlt-sys-padding-10) !important;
 +}
 +
 +</sxh>
 +
 +
 +
 +Y el siguiente código CSS:
 +
 +<sxh css>
 +.g--padding-top--0 {
 +  padding-top: var(--mlt-sys-padding-0) !important;
 +}
 +.g--padding-bottom-0 {
 +  padding-bottom: var(--mlt-sys-padding-0) !important;
 +}
 +.g--padding-right-0 {
 +  padding-right: var(--mlt-sys-padding-0) !important;
 +}
 +.g--padding-left-0 {
 +  padding-left: var(--mlt-sys-padding-0) !important;
 +}
 +.g--padding-top--1 {
 +  padding-top: var(--mlt-sys-padding-1) !important;
 +}
 +.g--padding-bottom-1 {
 +  padding-bottom: var(--mlt-sys-padding-1) !important;
 +}
 +.g--padding-right-1 {
 +  padding-right: var(--mlt-sys-padding-1) !important;
 +}
 +.g--padding-left-1 {
 +  padding-left: var(--mlt-sys-padding-1) !important;
 +}
 +.g--padding-top--2 {
 +  padding-top: var(--mlt-sys-padding-2) !important;
 +}
 +.g--padding-bottom-2 {
 +  padding-bottom: var(--mlt-sys-padding-2) !important;
 +}
 +.g--padding-right-2 {
 +  padding-right: var(--mlt-sys-padding-2) !important;
 +}
 +.g--padding-left-2 {
 +  padding-left: var(--mlt-sys-padding-2) !important;
 +}
 +
 +
 +......
 +
 +
 +.g--padding-left-8 {
 +  padding-left: var(--mlt-sys-padding-8) !important;
 +}
 +.g--padding-top--9 {
 +  padding-top: var(--mlt-sys-padding-9) !important;
 +}
 +.g--padding-bottom-9 {
 +  padding-bottom: var(--mlt-sys-padding-9) !important;
 +}
 +.g--padding-right-9 {
 +  padding-right: var(--mlt-sys-padding-9) !important;
 +}
 +.g--padding-left-9 {
 +  padding-left: var(--mlt-sys-padding-9) !important;
 +}
 +.g--padding-top--10 {
 +  padding-top: var(--mlt-sys-padding-10) !important;
 +}
 +.g--padding-bottom-10 {
 +  padding-bottom: var(--mlt-sys-padding-10) !important;
 +}
 +.g--padding-right-10 {
 +  padding-right: var(--mlt-sys-padding-10) !important;
 +}
 +.g--padding-left-10 {
 +  padding-left: var(--mlt-sys-padding-10) !important;
 +}
 +
 +</sxh>
 +
 +<note warning>
 +Es importante saber que no es posible en un único bucle no es posible generar todo el CSS.
 +
 +Piensa tu el motivo y luego mira a ver si una IA lo sabe.
 +</note>
 +
 +==== Ejercicio 4 ====
 +Repite el ejercicio anterior pero ahora con  ''$margins''
 +
 +==== Ejercicio 5 ====
 +Dado la variable:
 +
 +<sxh sass>
 +$font-families:(
 +  'sans-serif': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
 +  'serif': 'Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", Times, serif',
 +  'monospace': 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
 +  'default': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
 +);
 +
 +</sxh>
 +
 +genera las siguientes variables:
 +
 +<sxh css>
 +  --mlt-sys-font-family-sans-serif:-apple-system,    BlinkMacSystemFont,    "Segoe UI",    Roboto,    "Helvetica Neue",    Arial,    sans-serif;
 +  --mlt-sys-font-family-serif:Palatino,    "Palatino Linotype",    "Book Antiqua",    Georgia,    "Times New Roman",    Times,    serif;
 +  --mlt-sys-font-family-monospace:SFMono-Regular,    Menlo,    Monaco,    Consolas,    "Liberation Mono",    "Courier New",    monospace;
 +  --mlt-sys-font-family-default:-apple-system,    BlinkMacSystemFont,    "Segoe UI",    Roboto,    "Helvetica Neue",    Arial,    sans-serif;
 +</sxh>
 +
 +y los siguientes globales:
 +
 +<sxh css>
 +.g--font-family-sans-serif {
 +  font-family: var(--mlt-sys-font-family-sans-serif);
 +}
 +.g--font-family-serif {
 +  font-family: var(--mlt-sys-font-family-serif);
 +}
 +.g--font-family-monospace {
 +  font-family: var(--mlt-sys-font-family-monospace);
 +}
 +.g--font-family-default {
 +  font-family: var(--mlt-sys-font-family-default);
 +}
 +</sxh>
 +
 +
 +