Cómo escapar caracteres con Stylus
Clase 9 de 15 • Curso de Stylus 2018
Contenido del curso
Clase 9 de 15 • Curso de Stylus 2018
Contenido del curso
¿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:
unquote().\.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.