Diferencias

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

--- clase:daw:diw:1eval:tema04 [2025/11/03 11:37] – creado - editor externo 127.0.0.1
+++ clase:daw:diw:1eval:tema04 [2025/11/25 18:50] (actual) – [Variables CSS] Lorenzo
@@ Línea 654: / Línea 654: @@
-<sxh css>
+<sxh sass>
 .boton {
   font-family: var(--mlt-sys-font-default);
@@ Línea 687: / Línea 687: @@
-Pero aun se puede mejorar. En vez de usar directamente las variables podemos abstraerlo:
+Pero aun se tiene que mejorar la legibilidad del código . En vez de usar directamente las variables debemos abstraerlo:
-<sxh css; highlight: [2,3,5,6,7]>
+<sxh sass; highlight: [2-15]>
 .boton {
+  //Parte pública del componente
   --boton-color-strong:var(--mlt-sys-color-principal-5);
   --boton-color-weak:var(--mlt-sys-color-blanco-9);
@@ Línea 707: / Línea 708: @@
   --boton-border-radius:var(--mlt-sys-border-radius-4);
+  //Parte privada del componente
   font-family: var(--boton-font-family);
   font-size: var(--boton-font-size);
@@ Línea 767: / Línea 770: @@
 Por otro lado, las variables ''--boton-background-color'', ''--boton-border-color'', ''--boton-color'' definen como se ve el botón independientemente del color.
 Estas variables se van a modificar según la importancia del botón (primaria, secundaria y terciaria)
+Es decir que dentro del componente creamos una serie de variables **publicas** que se puede modificar fácilmente por cualquiera y luego en las propiedades CSS se usan esas variable públicas. De esa forma cambiar el componente no afecta a la parte **pública** del componente.