¿Para qué sirve Escapar en LESS?

En este artículo, conoceremos el concepto de Escape en LESS y cómo implementarlo y usarlo en el código LESS que generará el código CSS correspondiente. Mediante el uso de los lenguajes de preprocesador de CSS, es decir, LESS, que ayuda a reducir la complejidad del código para escribir el CSS. Escapar en LESS nos ayuda a usar cualquier string arbitraria como propiedad o valor de CSS. Básicamente, uno puede llamarlo una variable, pero escapar es muy diferente. A diferencia de las variables, donde solo podemos almacenar valor, al escapar, podemos almacenar una propiedad completa dentro de cualquier string. 

Sintaxis:

@name : ~ “ .. ”

Ejemplo 1: este ejemplo utiliza la función de escape para representar CSS en función del ancho de la pantalla.

/*LESS Code file*/

@mediacondition : ~"min-width:600px";
.content{
   font-size: 1em;
   @media (@mediacondition){
      background-color: gold;
   }
}

Salida : después de compilar el código en CSS nativo, se generará el siguiente archivo CSS.

/* CSS code */
.content {
  font-size: 1em;
}
@media (min-width:600px) {
  .content {
    background-color: gold;
  }
}

Ejemplo 2: este ejemplo utiliza la función de escape para representar CSS en función de la orientación.

/*LESS Code file*/

@res: ~'orientation : landscape';
.content{
    font-size: 1em;
   @media (@res) {
      background-color: gold;
   } 
    
}

Salida : después de compilar el código anterior, se generará el siguiente código CSS. 

/* CSS Code file */
.content {
  font-size: 1em;
}
@media (orientation : landscape) {
  .content {
    background-color: gold;
  }
}

Por lo tanto, el escape demuestra ser una característica muy útil mediante la cual podemos mantener una propiedad completa como un solo objeto que se puede usar varias veces en el código para que sea breve y fácil de entender.