Manejo de selectores en Stylus

Por Edwin Gonzales Melquiades
Manejo de selectores en Stylus

En este tutorial veremos como manejar selectores en Stylus con ejemplos paso a paso.

Siguiendo con los tutoriales de Stylus, en este tutorial vamos a aprender cómo manejar los selectores en este preprocesador. Así que empecemos.

Indentación

Como se habrán dado cuenta en los tutoriales anteriores, Stylus es un lenguaje basado en indetación. Es así que nosotros no necesitamos las llaves. Por ejemplo:

body
  background-color #fafafa

El código anterior se compilara de la siguiente manera:

body {
  background-color: #fafafa;
}

Como ven, solo necesitamos separar nuestras propiedades con indentación para que estas se comporten como tal.

Reglas

En Stylus también podemos separar por comas los selectores. Veamos el ejemplo:

body, article
  background-color #fafafa

Pero tenemos una mejor manera, sin comas y con saltos de linea. Como se ve en el siguiente ejemplo:

body
article
  background-color #fafafa

Referencia al padre (&)

Para hacer referencia al selector padre, necesitamos usar el caracter "ampersand"(&). Y los casos de uso mas comunes son cuando utilizamos :hover, :focus y otros. Un ejemplo:

input
  border 1px solid #fafafa
  &:hover
    border 1px solid #fcfcfc

Esto compilara a lo siguiente:

input {
  border: 1px solid #fafafa;
}
input:hover {
  border: 1px solid #fcfcfc;
}

Referencia a Raiz

Esto es genial, ya que hay veces en la que necesitamos asignar las mismas propiedades a una clase y a un selector anidado. Supongamos que necesitamos lo siguiente:

input {
  border: 1px solid #fafafa;
}
input:hover {
  border: 1px solid #fcfcfc;
}
.border-gris {
  border: 1px solid #fcfcfc;
}

Con ven se repiten las propiedades y valores que hay dentro de input:hover y .border-gris, en este caso para no duplicar código podemos anteponer un slash(/) al selector que no es anidado .border-gris y obtendriamos lo mismo pero sin repetir código.

input
  border 1px solid #fafafa
  &:hover,
  /.border-gris
    border 1px solid #fcfcfc

selector()

Por ultimo tenemos al constructor selector() que nos devuelve el selector que se esta compilando. Por ejemplo:

.border-gris
  selector()
// => ".border-gris"

Como ven nos devuelve el selector que se esta compilando, en este caso ".border-gris".

Iniciamos nuestro aprendizaje con la indentación, la cual es muy importante en Stylus, luego unas reglas, la referencia al padre (&) que lo vamos a usar muchísimo en nuestros proyectos. También vimos referencia a raíz y por último el constructor selector(), el cual nos devuelve el selector que se esta compilando. Hemos visto todo esto, porque conociendo bien la sintaxis de Stylus vamos a poder sacar el jugo a este pre procesador, ya que no es solo olvidarnos de las llaves y puntos y comas, sino usar todas sus características.

En un próximo tutorial seguiremos viendo más sobre Stylus y si desean aprender a desarrollar sitios web desde cero, para que sigan aprendiendo más sobre programación les recomiendo nuestro curso de HTML y CSS. Nos vemos en un próximo tutorial.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Edwin Gonzales Melquiades

Edwin Gonzales Melquiades

Frontend Developer. Fundador de DevCode. Me gusta Javascript y Python.