La Sintaxis de Stylus
Hola que tal muchachos, después de un tiempo retomo el tutorial de Stylus. En los 3 artículos anteriores hablé sobre Stylus, instalación, el uso de las variables y lo beneficioso que es para todas las personas que se dedican al mundo del diseño web. Pero hay algo que se me pasó de largo y es hablar sobre la sintaxis, que es la forma en la que vamos a estructurar y ordenar nuestro código CSS en Stylus.
Sangría o Indentación
Uno de los beneficios de Stylus es que tenemos una sintaxis mucho más corta y eficiente que nos hará ahorrar mucho tiempo.
El espacio en blanco en Stylus es muy importante ya que puede ser usado en lugar de las llaves de apertura y de cierre. Esto debe estar acompañado con un salto de línea, es decir, debemos de colocar el nombre de la clase, id o etiqueta, luego saltarnos a la siguiente línea y allí poner un espacio y colocar nuestras propiedades. Con eso indicamos a Stylus que lo que está dentro de la clase (hablando de forma indentada) será una propiedad y valor respectivamente.
En la imagen vemos como hemos reemplazado en nuestro archivo Stylus las llaves por un salto de línea y un espacio o sangría.
También podemos usar los espacios para reemplazarlos por los dos puntos (“:”) y reemplazar el punto y coma final por un salto de línea.
Como ven Stylus convirtió nuestro espacio entre la propiedad y el valor en dos puntos y como vio que no hay nada de texto en esa línea entonces simplemente la cerró con punto y coma.
Cabe recalcar que si lo deseamos podemos poner solo los dos puntos o el punto y coma o los dos, igual Stylus nos dará el mismo resultado. Pero la idea es no escribir esos signos para ahorrar tiempo.
Con Stylus podemos agregar las mismas propiedades y valores a varias clases, ids o etiquetas, basta con colocar los nombres de nuestras clases separados por comas en la misma línea o un nombre sin coma en cada línea o combinar las dos formas:
Stylus detecto la etiqueta, clase e id escritos, las dos primeras en la misma línea y por lo tanto con una coma para separarlas y la última por estar sola en una línea no necesita comas.
NOTA: Si se dan cuenta la clase “hola” no tiene comas porque por ser el último texto se toma como si fuese una clase por línea, aunque si le ponen coma al final el resultado será el mismo.
Referencia a los selectores Padres
El carácter “&” hace referencia al selector padre. Con esto podemos ahorrar tiempo si queremos agregar pseudo-selector como hover a nuestra clase.
Como ven, el símbolo “&” hace la función del selector padre, con eso le decimos a Stylus que debe poner el selector padre en la parte donde está el símbolo, y eso lo vemos en el resultado.
Referencia al selector root o principal (“/”)
Generalmente luego de unas horas trabajando en nuestro código CSS a través de Stylus llegamos a tener varios clases dentro de otras, y así se comienzan a crear subclases dentro de otras subclases, etc.
Pero ¿Cómo hacemos si queremos crear una nueva clase general y no una subclase, desde la posición dónde estamos? Pues bien hacemos lo mismo que en el ejemplo anterior solamente que ahora usamos la barra diagonal “/”.
Como ven solo agregamos la barra diagonal y Stylus nos crea una nueva clase principal o general y no una subclase dentro de otra clase como en las primeras líneas de la imagen.
Hasta aquí hemos llegado con la parte 4 del tutorial, espero que les guste y que lo disfruten.
PD: No se olviden de seguirme en twitter @sotelor10
