clase:daw:diw:1eval:tema05
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anteriorRevisión previa | |||
| clase:daw:diw:1eval:tema05 [2025/11/10 12:18] – [@forward] Lorenzo | clase:daw:diw:1eval:tema05 [2026/10/23 23:04] (actual) – Reorganización del módulo: contenido movido a las páginas nuevas de clase:daw:diw claude | ||
|---|---|---|---|
| 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, | ||
| - | Angular, por ejemplo, usa Dart Sass de forma predeterminada desde la versión 12. | ||
| - | </ | ||
| - | |||
| - | |||
| - | Enlaces con mas información de SASS: | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[http:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * | ||
| - | Curso de SASS: | ||
| - | * [[https:// | ||
| - | |||
| - | |||
| - | |||
| - | ===== Variables ===== | ||
| - | Las variables en SASS empiezan por el símbolo $. | ||
| - | |||
| - | <sxh sass> | ||
| - | $font-main: Helvetica, sans-serif; | ||
| - | $primary-color: | ||
| - | |||
| - | |||
| - | body { | ||
| - | font-family: | ||
| - | color: $primary-color; | ||
| - | } | ||
| - | | ||
| - | </ | ||
| - | | ||
| - | Se transforma en | ||
| - | |||
| - | <sxh css> | ||
| - | body { | ||
| - | font-family: | ||
| - | color: #E4A23F; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | ===== Arrays | ||
| - | Veamos ahora como usar los arrays | ||
| - | |||
| - | * Para acceder a un elemento de un array se usa la función '' | ||
| - | <sxh sass> | ||
| - | @use " | ||
| - | |||
| - | $lista: | ||
| - | |||
| - | $primero: list.nth($lista, | ||
| - | </ | ||
| - | |||
| - | * Para obtener el tamaño de un array se usa la función '' | ||
| - | <sxh sass> | ||
| - | @use " | ||
| - | |||
| - | $lista: | ||
| - | |||
| - | $tamanyo: | ||
| - | </ | ||
| - | |||
| - | ===== Mapas ===== | ||
| - | Veamos ahora las funciones de maps | ||
| - | |||
| - | * Para acceder a un elemento de un map se usa la función '' | ||
| - | |||
| - | |||
| - | <sxh sass> | ||
| - | @use " | ||
| - | $mapa:( | ||
| - | " | ||
| - | " | ||
| - | ); | ||
| - | |||
| - | $clave:a; | ||
| - | $valor: | ||
| - | |||
| - | </ | ||
| - | |||
| - | * Para obtener las claves de un map.: | ||
| - | |||
| - | <sxh sass> | ||
| - | @use " | ||
| - | $mapa:( | ||
| - | " | ||
| - | " | ||
| - | ); | ||
| - | |||
| - | |||
| - | $keys: | ||
| - | </ | ||
| - | |||
| - | Se obtiene un array los valores '' | ||
| - | |||
| - | |||
| - | ===== Bucle @for to ===== | ||
| - | Se usa para hacer un bucle desde '' | ||
| - | |||
| - | * Bucle con índice. | ||
| - | <sxh sass> | ||
| - | @for $i from 0 to 4 { | ||
| - | .g--border-# | ||
| - | border: 10px * $i solid # | ||
| - | } | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | 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; | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | ===== Bucle @for through ===== | ||
| - | Se usa para hacer un bucle desde '' | ||
| - | |||
| - | * Bucle con índice. | ||
| - | <sxh sass> | ||
| - | @for $i from 1 through 4 { | ||
| - | .g--border-# | ||
| - | border: 10px * $i solid # | ||
| - | } | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | 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; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | ===== Bucle @each de un array ===== | ||
| - | Recorre los elementos de una lista | ||
| - | |||
| - | <sxh sass> | ||
| - | |||
| - | $paddings: | ||
| - | |||
| - | @each $value in $paddings { | ||
| - | .g--padding-# | ||
| - | padding: $value; | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | <sxh css> | ||
| - | .g--padding-3px { | ||
| - | padding: 3px; | ||
| - | } | ||
| - | .g--padding-6px { | ||
| - | padding: 6px; | ||
| - | } | ||
| - | .g--padding-7px { | ||
| - | padding: 7px; | ||
| - | } | ||
| - | .g--padding-9px { | ||
| - | padding: 9px; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | ===== Bucle @each de un Map ===== | ||
| - | Para recorrer un map la forma más sencilla es la siguiente: | ||
| - | |||
| - | <sxh sass> | ||
| - | |||
| - | $map:( | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | ); | ||
| - | |||
| - | @each $key,$value in $map { | ||
| - | .g--padding-# | ||
| - | padding: $value; | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | <sxh css> | ||
| - | .g--padding-s { | ||
| - | padding: 3px; | ||
| - | } | ||
| - | .g--padding-m { | ||
| - | padding: 6px; | ||
| - | } | ||
| - | .g--padding-l { | ||
| - | padding: 7px; | ||
| - | } | ||
| - | .g--padding-xl { | ||
| - | padding: 9px; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | <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 ''# | ||
| - | |||
| - | |||
| - | ===== Selector Padre ===== | ||
| - | El uso de "&" | ||
| - | <sxh css> | ||
| - | AAA { | ||
| - | color:red; | ||
| - | | ||
| - | &__BBB { | ||
| - | padding: | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | se transforma en: | ||
| - | |||
| - | <sxh css> | ||
| - | AAA { | ||
| - | color:red; | ||
| - | } | ||
| - | | ||
| - | AAA__BBB { | ||
| - | padding: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | Mas información en [[https:// | ||
| - | |||
| - | |||
| - | ===== Funciones | ||
| - | En SASS también existen funciones " | ||
| - | |||
| - | <sxh sass> | ||
| - | @function getBorderSize($size) { | ||
| - | @return 10px * $size; | ||
| - | } | ||
| - | |||
| - | .c-button { | ||
| - | color: #FF0000; | ||
| - | border: getBorderSize(2) solid #00FF00; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | se transforma en | ||
| - | |||
| - | <sxh css> | ||
| - | .c-button { | ||
| - | color: #FF0000; | ||
| - | border: 20px solid #00FF00; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | ===== Mixings ===== | ||
| - | Son como trozos de código CSS que puedes añadir en otra clase CSS. Es como llamar a una " | ||
| - | |||
| - | <sxh sass> | ||
| - | @mixin box-shadow($color) { | ||
| - | -webkit-box-shadow: | ||
| - | -moz-box-shadow: | ||
| - | box-shadow: 2px 10px 24px $color; | ||
| - | } | ||
| - | |||
| - | .c-button { | ||
| - | color: #FF0000; | ||
| - | @include box-shadow(# | ||
| - | } | ||
| - | |||
| - | .c-panel { | ||
| - | color: #00FF00; | ||
| - | @include box-shadow(# | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | se transforma en | ||
| - | |||
| - | <sxh css> | ||
| - | .c-button { | ||
| - | color: #FF0000; | ||
| - | -webkit-box-shadow: | ||
| - | -moz-box-shadow: | ||
| - | box-shadow: 2px 10px 24px #FF0000; | ||
| - | } | ||
| - | |||
| - | .c-panel { | ||
| - | color: #00FF00; | ||
| - | -webkit-box-shadow: | ||
| - | -moz-box-shadow: | ||
| - | box-shadow: 2px 10px 24px #00FF00; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | ===== @use ===== | ||
| - | En versiones antiguas de SASS se usaba `@import`, pero en Dart Sass está obsoleto. | ||
| - | Ahora se recomienda usar **@use** y **@forward**, | ||
| - | |||
| - | Ejemplo: | ||
| - | |||
| - | |||
| - | <sxh sass; | ||
| - | $primary-color: | ||
| - | $font-main: Helvetica, sans-serif; | ||
| - | </ | ||
| - | |||
| - | |||
| - | <sxh scss; | ||
| - | @use ' | ||
| - | |||
| - | body { | ||
| - | font-family: | ||
| - | color: variables.$primary-color; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | Con @use se cargan los estilos de otro fichero y, para evitar conflictos, las variables se acceden con el prefijo del nombre del fichero '' | ||
| - | |||
| - | Si quieres usar las variables directamente sin el prefijo, puedes añadir la opción as *: | ||
| - | |||
| - | <sxh sass; title: | ||
| - | $primary-color: | ||
| - | $font-main: Helvetica, sans-serif; | ||
| - | </ | ||
| - | |||
| - | |||
| - | <sxh scss; | ||
| - | @use ' | ||
| - | |||
| - | body { | ||
| - | font-family: | ||
| - | color: $primary-color; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | ===== @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, | ||
| - | |||
| - | Además '' | ||
| - | |||
| - | Estructura de ejemplo: | ||
| - | |||
| - | <sxh text; | ||
| - | proyecto | ||
| - | ├─ utilidades | ||
| - | │ | ||
| - | │ | ||
| - | │ | ||
| - | │ | ||
| - | └─ styles.scss | ||
| - | </ | ||
| - | |||
| - | Contenido de los ficheros: | ||
| - | |||
| - | |||
| - | <sxh sass; | ||
| - | $primary-color: | ||
| - | </ | ||
| - | |||
| - | <sxh sass; | ||
| - | $main-font: Helvetica, sans-serif; | ||
| - | </ | ||
| - | |||
| - | <sxh sass; | ||
| - | @mixin redondeado($radio) { | ||
| - | border-radius: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | <sxh sass; | ||
| - | @forward ' | ||
| - | @forward ' | ||
| - | @forward ' | ||
| - | </ | ||
| - | |||
| - | |||
| - | <sxh sass; | ||
| - | @use ' | ||
| - | |||
| - | body { | ||
| - | font-family: | ||
| - | color: utilidades.$primary-color; | ||
| - | | ||
| - | @include utilidades.redondeado(10px); | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | <note important> | ||
| - | Fijarse que si creamos un fichero llamado '' | ||
| - | </ | ||
| - | |||
| - | |||
| - | Otra diferencia entre | ||
| - | |||
| - | ===== Condicional @if ===== | ||
| - | |||
| - | <sxh sass> | ||
| - | @mixin border($size) { | ||
| - | |||
| - | | ||
| - | @if $size>=3 { | ||
| - | $color:# | ||
| - | } @else { | ||
| - | $color:# | ||
| - | } | ||
| - | |||
| - | |||
| - | border: $size*2 solid $color; | ||
| - | } | ||
| - | |||
| - | .c-caja1 { | ||
| - | color: #FF0000; | ||
| - | @include border(2px); | ||
| - | } | ||
| - | .c-caja2 { | ||
| - | color: #FF0000; | ||
| - | @include border(5px); | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | se transforma en | ||
| - | |||
| - | <sxh css> | ||
| - | .c-caja1 { | ||
| - | color: #FF0000; | ||
| - | border: 4px solid #00FF00; | ||
| - | } | ||
| - | |||
| - | .c-caja2 { | ||
| - | color: #FF0000; | ||
| - | border: 10px solid #FF0000; | ||
| - | } | ||
| - | |||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | ===== Funciones de Color ===== | ||
| - | Ya existen una serie de funciones predefinidas en SASS: [[https:// | ||
| - | |||
| - | Entre las mas útiles están: | ||
| - | * '' | ||
| - | * '' | ||
| - | * '' | ||
| - | * '' | ||
| - | |||
| - | <sxh sass> | ||
| - | @use " | ||
| - | |||
| - | $color-fondo: | ||
| - | $color-borde: | ||
| - | |||
| - | .c-caja { | ||
| - | background-color: | ||
| - | border: 4px solid $color-borde; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | se transforma en | ||
| - | |||
| - | <sxh css> | ||
| - | .c-caja { | ||
| - | background-color: | ||
| - | border: 4px solid #a60b95; | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | ===== Ejercicios ===== | ||
| - | |||
| - | ==== Ejercicio 1 ==== | ||
| - | Usando la herramienta [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | Para ello crearemos la variable " | ||
| - | |||
| - | <sxh sass> | ||
| - | $colores:( | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ); | ||
| - | |||
| - | </ | ||
| - | |||
| - | Genera las siguientes variables CSS: | ||
| - | |||
| - | <sxh css> | ||
| - | |||
| - | --mlt-sys-principal-1: | ||
| - | --mlt-sys-principal-2: | ||
| - | |||
| - | ... | ||
| - | | ||
| - | --mlt-sys-principal-8: | ||
| - | --mlt-sys-principal-9: | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-alternativo-1: | ||
| - | --mlt-sys-alternativo-2: | ||
| - | |||
| - | ... | ||
| - | | ||
| - | --mlt-sys-alternativo-8: | ||
| - | --mlt-sys-alternativo-9: | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-rojo-1: | ||
| - | --mlt-sys-rojo-2: | ||
| - | |||
| - | ... | ||
| - | | ||
| - | --mlt-sys-rojo-8: | ||
| - | --mlt-sys-rojo-9: | ||
| - | |||
| - | | ||
| - | | ||
| - | | ||
| - | --mlt-sys-gris-2: | ||
| - | --mlt-sys-gris-3: | ||
| - | |||
| - | ... | ||
| - | |||
| - | --mlt-sys-gris-8: | ||
| - | --mlt-sys-gris-9: | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-blanco-1: | ||
| - | --mlt-sys-blanco-2: | ||
| - | |||
| - | ... | ||
| - | |||
| - | --mlt-sys-blanco-8: | ||
| - | --mlt-sys-blanco-9: | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | --mlt-sys-amarillo-1: | ||
| - | --mlt-sys-amarillo-2: | ||
| - | |||
| - | ... | ||
| - | |||
| - | --mlt-sys-amarillo-8: | ||
| - | --mlt-sys-amarillo-9: | ||
| - | |||
| - | </ | ||
| - | |||
| - | 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: | ||
| - | } | ||
| - | .g--border-color-principal-1 { | ||
| - | border-color: | ||
| - | } | ||
| - | .g--color-principal-2 { | ||
| - | color: var(--mlt-sys-color-principal-2) !important; | ||
| - | } | ||
| - | .g--background-color-principal-2 { | ||
| - | background-color: | ||
| - | } | ||
| - | .g--border-color-principal-2 { | ||
| - | border-color: | ||
| - | } | ||
| - | |||
| - | |||
| - | .... | ||
| - | |||
| - | |||
| - | .g--color-amarillo-9 { | ||
| - | color: var(--mlt-sys-color-amarillo-9) !important; | ||
| - | } | ||
| - | .g--background-color-amarillo-9 { | ||
| - | background-color: | ||
| - | } | ||
| - | .g--border-color-amarillo-9 { | ||
| - | border-color: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | ==== Ejercicio 2 ==== | ||
| - | Dado la variable " | ||
| - | |||
| - | <sxh scss> | ||
| - | $font-sizes: | ||
| - | </ | ||
| - | |||
| - | Genera las siguientes variables CSS: | ||
| - | <sxh CSS> | ||
| - | --mlt-sys-font-size-1: | ||
| - | --mlt-sys-font-size-2: | ||
| - | |||
| - | .. | ||
| - | | ||
| - | --mlt-sys-font-size-10: | ||
| - | --mlt-sys-font-size-11: | ||
| - | </ | ||
| - | |||
| - | 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; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | ==== Ejercicio 3 ==== | ||
| - | Dado la variable " | ||
| - | |||
| - | <sxh scss> | ||
| - | $paddings: | ||
| - | </ | ||
| - | |||
| - | Genera las siguientes variables CSS: | ||
| - | <sxh CSS> | ||
| - | --mlt-sys-padding-0: | ||
| - | --mlt-sys-padding-1: | ||
| - | |||
| - | .. | ||
| - | | ||
| - | --mlt-sys-padding-9: | ||
| - | --mlt-sys-padding-10: | ||
| - | </ | ||
| - | |||
| - | 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 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; | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | Y el siguiente código CSS: | ||
| - | |||
| - | <sxh css> | ||
| - | .g--padding-horizontal-0 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-0 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-1 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-1 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-2 { | ||
| - | padding-left: | ||
| - | margin-right: | ||
| - | } | ||
| - | .g--padding-vertical-2 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | |||
| - | |||
| - | ...... | ||
| - | |||
| - | |||
| - | .g--padding-horizontal-9 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-9 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-horizontal-10 { | ||
| - | padding-left: | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-vertical-10 { | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | Y el siguiente código CSS: | ||
| - | |||
| - | <sxh css> | ||
| - | .g--padding-top--0 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-0 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-0 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-0 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--1 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-1 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-1 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-1 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--2 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-2 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-2 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-2 { | ||
| - | padding-left: | ||
| - | } | ||
| - | |||
| - | |||
| - | ...... | ||
| - | |||
| - | |||
| - | .g--padding-left-8 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--9 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-9 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-9 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-9 { | ||
| - | padding-left: | ||
| - | } | ||
| - | .g--padding-top--10 { | ||
| - | padding-top: | ||
| - | } | ||
| - | .g--padding-bottom-10 { | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .g--padding-right-10 { | ||
| - | padding-right: | ||
| - | } | ||
| - | .g--padding-left-10 { | ||
| - | padding-left: | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | <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. | ||
| - | </ | ||
| - | |||
| - | ==== Ejercicio 4 ==== | ||
| - | Repite el ejercicio anterior pero ahora con '' | ||
| - | |||
| - | ==== Ejercicio 5 ==== | ||
| - | Dado la variable: | ||
| - | |||
| - | <sxh sass> | ||
| - | $font-families: | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ); | ||
| - | |||
| - | </ | ||
| - | |||
| - | genera las siguientes variables: | ||
| - | |||
| - | <sxh css> | ||
| - | --mlt-sys-font-family-sans-serif: | ||
| - | --mlt-sys-font-family-serif: | ||
| - | --mlt-sys-font-family-monospace: | ||
| - | --mlt-sys-font-family-default: | ||
| - | </ | ||
| - | |||
| - | y los siguientes globales: | ||
| - | |||
| - | <sxh css> | ||
| - | .g--font-family-sans-serif { | ||
| - | font-family: | ||
| - | } | ||
| - | .g--font-family-serif { | ||
| - | font-family: | ||
| - | } | ||
| - | .g--font-family-monospace { | ||
| - | font-family: | ||
| - | } | ||
| - | .g--font-family-default { | ||
| - | font-family: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
clase/daw/diw/1eval/tema05.1762773483.txt.gz · Última modificación: por Lorenzo