Herramientas de usuario
clase:daw:diw:1eval:tema04
Diferencias
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/06 17:15] admin [Ejercicios] |
clase:daw:diw:1eval:tema04 [2023/11/21 17:06] (actual) 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 348: | Línea 342: | ||
| Veamos como funcionan. | Veamos como funcionan. | ||
| + | <note tip> | ||
| + | * Los nombres de las variables debe empezar por '' | ||
| + | * Para usar las variables en CSS se usa '' | ||
| + | </ | ||
| + | |||
| * Las variables de CSS se crean así: | * Las variables de CSS se crean así: | ||
| Línea 353: | Línea 352: | ||
| <sxh css> | <sxh css> | ||
| :root { | :root { | ||
| - | --color-normal-5: #0056b8; | + | --color-alternativo-5: #0056b8; |
| } | } | ||
| </ | </ | ||
| Línea 361: | Línea 360: | ||
| <sxh css> | <sxh css> | ||
| .c-button { | .c-button { | ||
| - | background-color: | + | background-color: |
| + | } | ||
| + | </ | ||
| + | |||
| + | * Se puede definir un valor por defecto como segundo parámetro | ||
| + | |||
| + | <sxh css> | ||
| + | .c-button { | ||
| + | background-color: | ||
| } | } | ||
| </ | </ | ||
| <note tip> | <note tip> | ||
| - | * Los nombres de las variables debe empezar | + | Esto permite que podamos crear más valores |
| - | * Para usar las variables en CSS se usa '' | + | <sxh css> |
| + | .c-button { | ||
| + | background-color: | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | Es este caso el '' | ||
| </ | </ | ||
| + | |||
| Línea 410: | Línea 425: | ||
| - | < | + | < |
| :root { | :root { | ||
| --padding-xs: | --padding-xs: | ||
| Línea 425: | Línea 440: | ||
| <sxh css> | <sxh css> | ||
| .c-button { | .c-button { | ||
| - | padding: var(--padding-m); | + | |
| + | --c-button-padding-horizontal: | ||
| + | |||
| + | padding-top: | ||
| + | padding-bottom: | ||
| + | |||
| + | padding-left: | ||
| + | padding-right: | ||
| } | } | ||
| .g--padding-vertical-m { | .g--padding-vertical-m { | ||
| padding-top: | padding-top: | ||
| + | padding-bottom: | ||
| } | } | ||
| </ | </ | ||
| + | |||
| + | < | ||
| + | El usar variable nos lleva a tener muchísimas variables en CSS lo que nos puede llevar a pensar si eso afectará al rendimiento. En el documento {{ : | ||
| + | </ | ||
| ===== Bootstrap ===== | ===== Bootstrap ===== | ||
clase/daw/diw/1eval/tema04.1699287356.txt.gz · Última modificación: 2023/11/06 17:15 por admin
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
