Expresiones en CSS: Números, Strings, Colores y Booleanos

Clase 8 de 20 • Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Nicolas Neira

student•

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 */
}

Alejandro Ramos

student•

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...

Ana María Díaz

teacher•

Las expresiones pueden llegar a ser bastante útiles para proyectos más grandes!

Ketty Reyes

student•

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

Juan Sebastian Morales Salazar

student•

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!

Ariel Hernán Contini

student•

/* 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

Pastor Alexander Castro Aguilar

student•

Diego Andrés Lopez Rodriguez

student•

Marcelo Perez Izco

student•

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?

Platzi

student•

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.

David Limon

student•

Si tienes una duda ya te responde la IA, wow eso es nuevo...

Daniel Andres Rojas Paredes

student•

hola, en la imagen pueden ver como esta cargando mi proyecto en chrome,no entiendo porque se estan sobre escribiendo los colores, y porque el nav bar sale tan grande, cuando lo cargo en fierfox los colores no se sobre escriben, recuerdo que hace una o 2 semanas usando tambien el live server cargue en chrome un proyecto que usaba la libreria local storage,¡¿podria ser que por lo que halla quedado guardado de esa libreria se este sobreescribiendo mis colores?¿ podria ser otra cosa?

Ariel Hernán Contini

student•

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.

MARCO ANTONIO REYES GONZALEZ

student•

Expresiones literales