Expresiones: Literales y Operaciones

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…

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

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