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 Última revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:1eval:tema04 [2023/11/07 17:28] admin [Variables CSS] |
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 348: | Línea 343: | ||
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 353: | ||
<sxh css> | <sxh css> | ||
:root { | :root { | ||
- | --color-normal-5: #0056b8; | + | --color-alternativo-5: #0056b8; |
} | } | ||
</ | </ | ||
Línea 361: | Línea 361: | ||
<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 426: | ||
- | < | + | < |
:root { | :root { | ||
--padding-xs: | --padding-xs: | ||
Línea 425: | Línea 441: | ||
<sxh css> | <sxh css> | ||
.c-button { | .c-button { | ||
- | --c-button-padding-vertical: | + | --c-button-padding-vertical: |
- | --c-button-padding-horizontal: | + | --c-button-padding-horizontal: |
padding-top: | padding-top: | ||
Línea 441: | Línea 457: | ||
</ | </ | ||
+ | |||
+ | < | ||
+ | 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 ===== |