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:10] admin [4. SASS Avanzado] |
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 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 ==== | ||
<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-padding-vertical: | ||
+ | --c-button-padding-horizontal: | ||
- | .c-button { | + | padding-top: |
- | padding: var(--padding-m) | + | padding-bottom: |
+ | |||
+ | padding-left: | ||
+ | padding-right: | ||
+ | } | ||
+ | |||
+ | .g--padding-vertical-m | ||
+ | padding-top: var(--padding-m); | ||
+ | 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 ===== | ||
Línea 429: | Línea 466: | ||
- | |||
- | |||
- | |||
- | ===== Como poner una sombra ===== | ||
- | Para terminar vamos a contar las diversas opciones para poner una sombra a un div: | ||
- | * Añadiendo el estilo directamente en el div | ||
- | * Añadiendo el estilo en la clase que tendremos en el div | ||
- | * Usando el framework Tailwind: [[https:// | ||
- | * Usando el [[https:// | ||
- | * Creando un bucle a partir del array y crear los globales | ||
- | * Usando una arquitectura de funciones, mixins y bucles para crear los globales. | ||
===== Ejercicios ===== | ===== Ejercicios ===== | ||
==== Ejercicio 1 ==== | ==== Ejercicio 1 ==== | ||
- | |||
{{: | {{: | ||
- | * Crea la función '' | + | * Crea los globales |
- | * Crea la función '' | + | |
- | * Crea el mixing '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * Crea la clases globales usando el mixing. Las clases css son: | + | |
<sxh css> | <sxh css> | ||
- | g--shadow-0 { } | + | g--shadow-none { } |
g--shadow-1 { } | g--shadow-1 { } | ||
g--shadow-2 { } | g--shadow-2 { } | ||
g--shadow-3 { } | g--shadow-3 { } | ||
g--shadow-4 { } | g--shadow-4 { } | ||
+ | g--shadow-5 { } | ||
</ | </ | ||
- | Siendo cada clase la correspondiente a cada una de las posibles sombras. | + | * Crea las variables CSS correspondientes. |
+ | * Crea el mixing '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
Línea 493: | Línea 518: | ||
==== Ejercicio 3 ==== | ==== Ejercicio 3 ==== | ||
- | Modifica la página | + | Crea los globales y las variable CSS de los siguientes colores: |
+ | |||
+ | {{: | ||
+ | |||
+ | ==== Ejercicio 4 ==== | ||
+ | Modifica la clase '' |