Diferencias

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

--- clase:daw:diw:1eval:tema04 [2023/11/07 17:39]
admin [Variables CSS]
+++ clase:daw:diw:1eval:tema04 [2023/11/21 17:06] (actual)
admin [Bucle @for through]
@@ Línea 127: / Línea 127: @@
 ===== 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.
@@ Línea 160: / Línea 160: @@
 </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 =====
-Es un bucle desde el valor inicial al final
+Se usa para hacer un bucle desde ''1'' hasta ''n''
   * Bucle con índice.
 <sxh sass>
-@for $i from 0 through 4 {
+@for $i from 1 through 4 {
   .g--border-#{$i} {
       border: 10px * $i solid #00FF00;
@@ Línea 178: / Línea 177: @@
 <sxh css>
-.g--border-0 {
-  border: 0px solid #00FF00;
-}
 .g--border-1 {
   border: 10px solid #00FF00;
@@ Línea 199: / Línea 194: @@
 </sxh>
-<note important>El bucle anterior va de 0 a 4. El decir al último elemento **SI** se llega.</note>
@@ Línea 431: / Línea 425: @@
-<sxh CSS>
+<sxh css>
 :root {
   --padding-xs:1px;
@@ Línea 446: / Línea 440: @@
 <sxh css>
 .c-button {
-    --c-button-padding-vertical:var(--padding-s);
+    --c-button-padding-vertical:var(--padding-s,6px);
-    --c-button-padding-horizontal:var(--padding-m);
+    --c-button-padding-horizontal:var(--padding-m,8px);
     padding-top: var(--c-button-padding-vertical);
@@ Línea 462: / Línea 456: @@
 </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 =====

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página