Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
clase:daw:diw:1eval:tema04 [2023/11/02 15:22] admin |
clase:daw:diw:1eval:tema04 [2023/11/21 17:06] admin [Bucle @for through] |
||
---|---|---|---|
Línea 127: | Línea 127: | ||
===== Bucle @for to ===== | ===== Bucle @for to ===== | ||
- | Es un bucle desde el valor inicial al final-1 | + | Se usa para hacer un bucle desde '' |
* Bucle con índice. | * Bucle con índice. | ||
Línea 160: | Línea 160: | ||
</ | </ | ||
- | <note important> | ||
===== Bucle @for through ===== | ===== Bucle @for through ===== | ||
- | Es un bucle desde el valor inicial al final | + | Se usa para hacer un bucle desde '' |
* Bucle con índice. | * Bucle con índice. | ||
<sxh sass> | <sxh sass> | ||
- | @for $i from 0 through 4 { | + | @for $i from 1 through 4 { |
.g--border-# | .g--border-# | ||
border: 10px * $i solid # | border: 10px * $i solid # | ||
Línea 178: | Línea 177: | ||
<sxh css> | <sxh css> | ||
- | .g--border-0 { | ||
- | border: 0px solid #00FF00; | ||
- | } | ||
- | |||
.g--border-1 { | .g--border-1 { | ||
border: 10px solid #00FF00; | border: 10px solid #00FF00; | ||
Línea 199: | Línea 194: | ||
</ | </ | ||
- | <note important> | ||
Línea 342: | Línea 336: | ||
- | ===== Uso de globales en componentes | + | ===== Variables CSS ===== |
- | Hasta ahora vemos visto como podemos crear una serie de tamaño, color, etc mediante el uso de globales. Vamos a ver ahora como podemos usar esos mismo valores pero dentro de componentes. | + | En CSS existen las variables. La ventaja |
+ | * Se pueden cambiar en tiempo de ejecución desde JavaScript | ||
+ | * Pueden existir | ||
- | La forma de hacerlo es mediante | + | Veamos como funcionan. |
+ | <note tip> | ||
+ | * Los nombres | ||
+ | * Para usar las variables en CSS se usa '' | ||
+ | </ | ||
- | ==== Variables CSS ==== | + | * Las variables de CSS se crean así: |
- | Las variables de CSS se crean así: | + | |
<sxh css> | <sxh css> | ||
:root { | :root { | ||
- | --color-normal-5: #0056b8; | + | --color-alternativo-5: #0056b8; |
- | --color-alternativo-0: | + | |
- | --color-peligroso-10: | + | |
} | } | ||
</ | </ | ||
+ | * Desde CSS se usan así. | ||
- | <note tip>Los nombres de las variables debe empezar por '' | + | <sxh css> |
+ | .c-button { | ||
+ | background-color: | ||
+ | } | ||
+ | </sxh> | ||
- | Para usar las variables se usa '' | + | * Se puede definir un valor por defecto como segundo parámetro |
<sxh css> | <sxh css> | ||
.c-button { | .c-button { | ||
- | background-color: | + | background-color: |
} | } | ||
</ | </ | ||
- | ==== Estructura ==== | + | <note tip> |
- | Es decir para cada una de las cosas que estandarizemos hay que hacer 2 cosas: | + | Esto permite que podamos crear más valores por defecto con el siguiente truco de forma que si no está una variable, usemos otra y sino otra ,etc.: |
- | * Un global: Para que podamos usar lo que hemos estandarizado directamente desde el HTML | + | <sxh css> |
- | * Una variable CSS: Para que podamos usar lo que hemos estandarizado desde otra clase CSS. | + | .c-button { |
+ | background-color: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Es este caso el '' | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | * Desde JavaScript se modifican así: | ||
+ | |||
+ | <sxh javascript> | ||
+ | let root = document.documentElement; | ||
+ | root.style.setProperty(' | ||
+ | </ | ||
+ | |||
+ | * Desde JavaScript se leen así: | ||
+ | |||
+ | <sxh javascript> | ||
+ | let root = document.documentElement; | ||
+ | let colorNormal=getComputedStyle(root).getPropertyValue(" | ||
+ | </ | ||
+ | ==== Creación de variables ==== | ||
+ | A lo largo del curso hemos visto que debemos limitar nuestras opciones a usar serie de valores. Ahora esa serie de valores deben ser variables. | ||
- | ==== Ejemplo Padding ==== | ||
<sxh sass> | <sxh sass> | ||
$paddings:( | $paddings:( | ||
- | "xl":" | + | "xs":" |
- | " | + | " |
" | " | ||
" | " | ||
" | " | ||
); | ); | ||
- | |||
- | |||
- | <sxh sass> | ||
- | @each $key,$value in $paddings { | ||
- | .g--padding-# | ||
- | padding: $value; | ||
- | } | ||
- | } | ||
:root { | :root { | ||
Línea 400: | Línea 419: | ||
} | } | ||
} | } | ||
- | |||
- | |||
</ | </ | ||
+ | Que generá en CSS | ||
- | * Uso del padding en el HTML | ||
- | < | + | < |
- | <div class=" | + | :root { |
+ | --padding-xs: | ||
+ | --padding-s: | ||
+ | | ||
+ | --padding-l: | ||
+ | --padding-xl: | ||
+ | } | ||
</ | </ | ||
- | * Uso del padding | + | Esa variables se usarán siempre tanto en los componentes , como layouts, como globales. |
- | <sxh css> | + | |
+ | |||
+ | <sxh css> | ||
.c-button { | .c-button { | ||
- | | + | --c-button-padding-vertical: |
+ | --c-button-padding-horizontal: | ||
+ | |||
+ | padding-top: | ||
+ | padding-bottom: | ||
+ | |||
+ | padding-left: | ||
+ | padding-right: | ||
+ | } | ||
+ | |||
+ | .g--padding-vertical-m { | ||
+ | padding-top: | ||
+ | padding-bottom: var(--padding-m); | ||
} | } | ||
</ | </ | ||
- | ===== Ejemplo sombra ===== | + | < |
- | Para terminar vamos a contar las diversas opciones para poner una sombra a un div: | + | El usar variable nos lleva a tener muchísimas variables |
- | * Añadiendo el estilo directamente | + | </note> |
- | * Añadiendo el estilo en la clase que tendremos en el div | + | |
- | * Usando | + | |
- | * Usando el [[https:// | + | |
- | * Creando un bucle a partir del array y crear los globales | + | |
- | * Creando un bucle a partir del array y crear las variables CSS | + | |
- | <note tip> | + | ===== Bootstrap ===== |
En el siguiente artículo [[https:// | En el siguiente artículo [[https:// | ||
- | </ | ||
Línea 491: | Línea 521: | ||
{{: | {{: | ||
+ | |||
+ | ==== Ejercicio 4 ==== | ||
+ | Modifica la clase '' |