¿Cómo usar las Variables en LESS CSS?

- Andrés Cruz

In english
¿Cómo usar las Variables en LESS CSS?

Si has trabajado aunque sea un poco con Las Hojas de Estilo en Cascada (CSS) es muy probable que hayas realizado algo como lo siguiente:

.clase1 {  
    background: #000;  
}  
.clase2 {  
    background: #FFF;  
    color: #000;  
}  
.clase3 {  
    border: 1px solid #000;  
	color: #F00; 
} 

Claramente, vemos que existen valores repetidos a lo largo del CSS anterior; si quisiéramos cambiar (por ejemplo) el color negro (#000) por algún otro color como rojo (#F00) tendríamos que aplicar el cambio en tres sitios distintos (para nuestro ejemplo).

Las Variables en LESS CSS

La cosa se complica bastante cuando la Hoja de Estilo crece y quisieras hacer un completo cambio en la misma; para esto LESS CSS nos ofrece el uso de las Variables.

Las Variables en LESS CSS funcionan exactamente como cualquier variable en cualquier lenguaje de programación habido y por haber; es decir, las variables permiten especificar los valores utilizados en un solo lugar y poder utilizarlos a lo largo de la Hoja de Estilo, esto trae como ventaja que los cambios globales pueden resolverse tan fácilmente como cambiar una línea de código; el valor de la variable en sí:

@color: #000;  
  
.clase1 {  
    background: @color;  
}  
.clase2 {  
    background: #fff;  
    color: @color;  
}  
.clase3 {  
    border: 1px solid @color;  
	color: #F00; 
} 

Al compilar el código LESS anterior obtendremos:

.clase1 {
  background: #000000;
}
.clase2 {
  background: #fff;
  color: #000000;
}
.clase3 {
  border: 1px solid #000000;
  color: #F00;
}

Valores de las Variables en LESS CSS

Podemos definir las Variables de LESS CSS prácticamente con cualquier valor:

@color: 1px solid black;  
  
.clase1 {  
   border: @color;  
}  
.clase3 {  
  border: 1px solid @color;  
	color: #F00; 
} 

Al compilar el código LESS anterior obtendremos:

.clase1 {
  border: 1px solid #000000;
}
.clase3 {
  border: 1px solid 1px solid #000000;
  color: #F00;
}

Incluso texto:

@contenido: "mi contenido";  
  
.clase1.before {  
  content: @contenido
} 

Al compilar el código LESS anterior obtendremos:

.clase1.before {  content: "mi contenido"; }

Variables como valores para las Variables en LESS CSS

También es posible definir las variables con un nombre de la variable:

@contenido: "mi contenido";  
@agregado: "contenido";
  
.clase1.before {  
  content: @@agregado;
} 

Al compilar el código LESS anterior obtendremos:

.clase1.before {
  content: "mi contenido";
}
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.