Expresiones en CSS: Números, Strings, Colores y Booleanos
Contenido del curso
Nicolas Neira
----- ----
Ana María Díaz
Profesor
Ketty Reyes
Juan Sebastian Morales Salazar
Ariel Hernán Contini
Pastor Alexander Castro Aguilar
Diego Andrés Lopez Rodriguez
Kenneth Angulo L
Marcelo Perez Izco
Platzi
David Limon
Daniel Andres Rojas Paredes
Ariel Hernán Contini
MARCO ANTONIO REYES GONZALEZ
Ejemplo de CSS con expresiones
/* Números */ div { width: 200px; /* Valor numérico */ opacity: 0.8; /* Valor numérico */ font-size: 18px; /* Valor numérico */ } /* Strings */ h1 { content: "Hola"; /* Valor de cadena */ font-family: "Arial", sans-serif; /* Valor de cadena */ } /* Colores */ p { color: red; /* Valor de color */ background-color: #00ff00; /* Valor de color en formato hexadecimal */ border: 1px solid rgb(255, 0, 0); /* Valor de color en formato de función RGB */ } /* Booleanos */ span { display: none; /* Valor booleano (false) */ visibility: visible; /* Valor booleano (true) */ } /* Null */ section { --mi-variable: null; /* Valor null */ } /* Listas */ ul { list-style: square inside; /* Valor de lista */ margin: 10px 20px 30px; /* Valor de lista */ } /* Mapas */ body { --mi-mapa: (primary-color: blue, secondary-color: red); /* Valor de mapa */ color: var(--mi-mapa, primary-color); /* Uso de mapa en una propiedad */ }
Las expresiones serían los valores que les ponemos las propiedades del selector que estamos dando estilos :0
En Sass estas expresiones pueden ser funciones, mixins, variables...
Las expresiones pueden llegar a ser bastante útiles para proyectos más grandes!
Expresiones: Una expresión es todo aquello que va del lado derecho de una variable, admitiendo varios tipos de valores. Las expresiones son mucho más poderosas que los valores CSS simples, ya que se pasan como argumentos a mixins y funciones.
Expresiones literales ● Números ● Strings ● Colores ● Booleanos ● Null ● Listas ● Mapas
Súper útil para cuando son proyectos grandes! Imagínense cambiar uno a uno los colores de un sitio web con mas de 10 internas... Una tarea sería tediosísima!
/* Números / div { width: 200px; / Valor numérico / opacity: 0.8; / Valor numérico / font-size: 18px; / Valor numérico */ }
/* Strings / h1 { content: "Hola"; / Valor de cadena / font-family: "Arial", sans-serif; / Valor de cadena */ }
/* Colores / p { color: red; / Valor de color / background-color: #00ff00; / Valor de color en formato hexadecimal / border: 1px solid rgb(255, 0, 0); / Valor de color en formato de función RGB */ }
/* Booleanos / span { display: none; / Valor b
#O9e989
Cuidado con esa letra O en lugar de un cero, porque Sass te lanzará un error al compilar: los códigos hexadecimales solo aceptan números del 0 al 9 y letras de la A a la F.
¿Qué pasaría si cambias esa O por un cero para que sea un #09e989 válido?
No estoy muy de acuerdo con lo expuesto en esta clase. Siempre creí que el valor asignado a una propiedad se conoce simplemente como "valor":
selector {
propiedad: valor;
}
Investigué un poco y creo que las "expresiones" en CSS vendrían a ser algo así como fragmentos de código que permiten realizar cálculos y evaluaciones dinámicas para asignar valores a propiedades CSS. Sin embargo ya no se recomienda su uso.
Ustedes que opinan?
El uso de 'expresiones' en el contexto de la clase se refiere a los valores que pueden ser asignados a propiedades en CSS, incluyendo colores, strings, etc., no a 'expresiones' en el sentido tradicional de CSS.
Si tienes una duda ya te responde la IA, wow eso es nuevo...
Una expresión es todo aquello que va del lado derecho de una variable, admitiendo varios tipos de valores. Las expresiones son mucho mas poderosas que los valores CSS Simples, ya que se pasan como argumentos mixins y funciones.
Expresiones literales
