Cómo escapar caracteres con Stylus

¿Cómo escapar caracteres en Stylus?

Stylus tiene muchos superpoderes que nos permiten hacer un código CSS más eficiente, hasta el momento ya hemos revisado varios de estos superpoderes que le otorga Stylus a CSS, pero vemos uno más, escapar caracteres.

Si queremos realizar esto tenemos dos opciones, que son:

1. La función unquote().
2. El carácter \.

Expliquemos un poco ambas para ver en qué caso usar una u otra.

Unquote

La característica de unquote() es que nos permite eliminar las comillas de una cadena, esto puede ser útil cuando tenemos un variable de tipo string, pero necesitamos mostrar un valor de CSS.

$color = '#FFF'

body
  color unquote($color)

Si no usáramos el unquote() el resultado sería:

body {
  color: '#FFF';
}

Lo cual no sería un valor válido en nuestro CSS.

Carácter \

Stylus nos permite también escapar cualquier otro tipo de caracteres además de las ’’. Al hacer esto los convierte en identificadores, lo que les permite ser representados como literales.

Ilustremos esto con un ejemplo. Si lo que queremos imprimir en nuestro código CSS es:

body {
	padding: 1+2;
}

Entonces lo que debemos tener en nuestro archivo de Stylus es:

body
	padding 1 \+ 2

De esta forma el signo/carácter + se tomará como una literal.

Extra

Stylus nos permite realizar operaciones matemáticas, una de estas es la división. Hay situaciones en la que al querer hacer dicha operación esta no será realizada, por ejemplo:

div
	border-radius 20px/10px

En este ejemplo Stylus dejará el valor tal cual fue declarado, porque la sintaxis de la propiedad border-radius acepta este tipo de valores. Si queremos que la operación se ejecute debemos de hacer uso de paréntesis.

div
	border-radius (20px/10px)

Ahora ya sabes cómo escapar caracteres con Stylus, si tienes alguna duda o aporte no dudes en dejarlo en los comentarios. Continuemos con el curso y no pares de aprender.