logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:1eval:tema04

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

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 6: Línea 6:
   * [[https://sass-guidelin.es/|Sass Guidelines]]   * [[https://sass-guidelin.es/|Sass Guidelines]]
   * [[https://sass-lang.com/documentation/at-rules/mixin/|Sass: @mixin and @include]]   * [[https://sass-lang.com/documentation/at-rules/mixin/|Sass: @mixin and @include]]
-  * [[view-source:https://sass-lang.com/documentation/at-rules/function/|Sass: @function]] +  * [[https://sass-lang.com/documentation/at-rules/function/|Sass: @function]] 
   * [[http://thesassway.com/intermediate/if-for-each-while|Sass control directives: @if, @for, @each and @while]]   * [[http://thesassway.com/intermediate/if-for-each-while|Sass control directives: @if, @for, @each and @while]]
     * [[https://sass-lang.com/documentation/at-rules/control/if|Sass: @if and @else]]     * [[https://sass-lang.com/documentation/at-rules/control/if|Sass: @if and @else]]
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 ''0'' a ''n-1''
  
   * Bucle con índice.   * Bucle con índice.
Línea 160: Línea 160:
 </sxh> </sxh>
  
-<note important>El bucle anterior va de 0 a 3 y no hasta 4. El decir al último elemento **NO** se llega.</note> 
  
 ===== Bucle @for through ===== ===== Bucle @for through =====
-Es un bucle desde el valor inicial al final+Se usa para hacer un bucle desde ''1'' hasta ''n''
  
   * Bucle con índice.   * Bucle con índice.
 <sxh sass> <sxh sass>
-@for $i from 0 through 4 {+@for $i from 1 through 4 {
   .g--border-#{$i} {      .g--border-#{$i} {   
       border: 10px * $i solid #00FF00;        border: 10px * $i solid #00FF00; 
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:
 </sxh> </sxh>
  
-<note important>El bucle anterior va de 0 a 4. El decir al último elemento **SI** se llega.</note> 
  
  
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 de las variables CSS vs las de SASS son: 
 +  * Se pueden cambiar en tiempo de ejecución desde JavaScript 
 +  * Pueden existir a nivel local dentro de los selectores.
  
-La forma de hacerlo es mediante variables de CSS.+Veamos como funcionan. 
 +<note tip> 
 +  * Los nombres de las variables debe empezar por ''--'' 
 +  * Para usar las variables en CSS se usa ''var(--nombre-variable)'' 
 +</note>
  
  
-==== 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: #ed8936; +
-    --color-peligroso-10: #c53030;+
 } }
 </sxh> </sxh>
  
 +  * Desde CSS se usan así.
  
-<note tip>Los nombres de las variables debe empezar por ''--''</note>+<sxh css> 
 +.c-button { 
 +    background-color:var(--color-alternativo-5) 
 +} 
 +</sxh>
  
-Para usar las variables se usa ''var(--nombre-variable)''+  * Se puede definir un valor por defecto como segundo parámetro
  
 <sxh css> <sxh css>
 .c-button { .c-button {
-    background-color:var(--color-normal-5)+    background-color:var(--color-alternativo-5,#FF0000)
 } }
 </sxh> </sxh>
  
-==== 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:var(--color-alternativo-5,var(--color-alternativo,#FF0000)) 
 +} 
 +</sxh> 
 + 
 +Es este caso el ''background-color'' se usa la variable ''--color-alternativo-5'' pero si no existe esa variable se usaría la variable ''--color-alternativo'' pero si esa tampoco existe se usará ''#FF0000'' 
 + 
 +</note> 
 + 
 + 
 + 
 +  * Desde JavaScript se modifican así: 
 + 
 +<sxh javascript> 
 +let root = document.documentElement; 
 +root.style.setProperty('--color-normal-5', "#FF0000"); 
 +</sxh> 
 + 
 +  * Desde JavaScript se leen así: 
 + 
 +<sxh javascript> 
 +let root = document.documentElement; 
 +let colorNormal=getComputedStyle(root).getPropertyValue("--color-normal-5"); 
 +</sxh> 
  
 +==== 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":"0px", +  "xs":"1px", 
-  "s":"1px",+  "s":"2px",
   "m":"6px",   "m":"6px",
   "l":"12px",   "l":"12px",
   "xl":"20px"   "xl":"20px"
   );   );
- 
- 
-<sxh sass> 
-@each $key,$value in $paddings { 
-  .g--padding-#{$key} { 
-    padding: $value; 
-  } 
-} 
  
 :root { :root {
Línea 400: Línea 419:
   }   }
 } }
- 
- 
  
 </sxh> </sxh>
  
 +Que generá en CSS
  
-  * Uso del padding en el HTML 
  
-<sxh html> +<sxh css> 
-<div class="g--padding-m"></div>+:root { 
 +  --padding-xs:1px; 
 +  --padding-s:2px; 
 +  --padding-m:6px; 
 +  --padding-l:12px; 
 +  --padding-xl:20px; 
 +}
 </sxh> </sxh>
  
-  * Uso del padding en otra clase:+Esa variables se usarán siempre tanto en los componentes , como layouts, como globales. 
 + 
 <sxh css> <sxh css>
 +.c-button {
 +    --c-button-padding-vertical:var(--padding-s,6px);
 +    --c-button-padding-horizontal:var(--padding-m,8px);
  
-.c-button { +    padding-top: var(--c-button-padding-vertical); 
-  padding: var(--padding-m)+    padding-bottom: var(--c-button-padding-vertical); 
 +     
 +    padding-left: var(--c-button-padding-horizontal); 
 +    padding-right: var(--c-button-padding-horizontal); 
 +} 
 + 
 +.g--padding-vertical-m { 
 +  padding-top: var(--padding-m); 
 +  padding-bottom: var(--padding-m);  
 } }
  
 </sxh> </sxh>
  
- +<note> 
 +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 {{ :clase:daw:diw:1eval:css_variables_performance_benchmark_2021_by_konrad_fedorczyk_medium.pdf |CSS Variables performance benchmark 2021}} nos indica que no afecta prácticamente nada al rendimiento. 
 +</note>
  
 ===== 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://tailwindcss.com/docs/box-shadow|Box Shadow]] 
-  * Usando el [[https://getbootstrap.com/docs/5.0/utilities/api/|Utility API]] de Boostrap 
-  * 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 ====
- 
 {{:clase:daw:diw:1eval:sombras_y_profundidad.png|}} {{:clase:daw:diw:1eval:sombras_y_profundidad.png|}}
  
-  * Crea la función ''getShadow($key)'' de forma que retorne cada una de los sombreados. Sabiendo que las claves empiezan en 0. +  * Crea los globales de forma que retorne cada una de los sombreados. Sabiendo que las claves empiezan en 1 y hay otra que será ''none''.
-  * Crea la función ''getShadowKeys()'' de forma wue retorne todas las claves, empezando por 0. +
-  * Crea el mixing ''box-shadow($key)''. Usará las funciones que has creado antes y de forma que tenga las propiedades css de: +
-    * ''-webkit-box-shadow'' +
-    * ''-moz-box-shadow'' +
-    * ''box-shadow'' +
-  * 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 {     }
 </sxh> </sxh>
  
-Siendo cada clase la correspondiente a cada una de las posibles sombras.+  * Crea las variables CSS correspondientes. 
 +  * Crea el mixing ''box-shadow($key)''. Usará las funciones que has creado antes y de forma que tenga las propiedades css de: 
 +    * ''-webkit-box-shadow'' 
 +    * ''-moz-box-shadow'' 
 +    * ''box-shadow'' 
  
  
Línea 493: Línea 518:
  
 ==== Ejercicio 3 ==== ==== Ejercicio 3 ====
-Modifica la página del tema anterior para organizar todo de forma que los valores estén estandarizados, usando funciones y usando mixins+Crea los globales y las variable CSS de los siguientes colores: 
 + 
 +{{:clase:daw:diw:1eval:paleta_de_colores.png|}} 
 + 
 +==== Ejercicio 4 ==== 
 +Modifica la clase ''c-button'' del tema 1 para que ahora haga uso de variables CSS en los paddings, etc.
clase/daw/diw/1eval/tema04.1698934234.txt.gz · Última modificación: 2023/11/02 15:10 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
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki