Conoce más datos sobre Stylus: datos útiles y otras características

Cómo extra a este curso me gustaría hablar un poco más sobre Stylus, algunos temas que te van a ser de ayuda y que van a agilizar mucho más el como haces código.

DATOS ÚTILES

1. Puedes usar colores hexadecimales en valores rgb:

Ejemplo, necesitas un fondo azul con transparencia del 50 %.

.elementbackground-color: rgba(#3f9eef, 0.5)

Stylus se encarga de convertir tu color hexadecimal a rgb

2. Anidar media-queries:

Ejemplo, tienes un elemento que posteriormente va a cambiar (dependiendo de la resolución de la pantalla). Esto lo podemos hacer justo en el mismo elemento por así decirlo.

.itemmargin: 50px

  @media screen and (min-width: 412px)
    margin: 100px

Nota: Esto en el futuro te puede traer problemas en tu código CSS, pues se estarían repitiendo los media-queries. Lo apropiado es con gulp/grunt/webpack adjuntes esos media-queries y así limpies tu código.

3. Parámetros Rest:

Los parámetros te permiten recibir un número n (indefinido) de parámetros y que estos sean aplicados.

Ejemplo, tienes un mixin para el borde de un elemento y necesitas poner varios valores, para esto es que el operador rest nos puede hacer el trabajo mucho más sencillo.

mixin-agregar-borde(valores...)border: valores

.item
  mixin-agregar-borde(5px solid black)

Nuestro CSS:

.item {
	border: 5px solid #000;
}

@EXTENDS

Extends nos permite tomar propiedades de un elemento en particular y poder reutilizar ese código en otro elemento, eso sin duplicar código (algo que si pasa con los mixins).

.element-1background-color: red
  width: 200pxheight: 200px.element-2
  @extend .element-1color: white

Nuestro CSS:

.element-1,
.element-2 {
	background-color: #f00;
	width: 200px;
	height: 200px;
}

.element-2 {
	color: #fff;
}

COMENTARIOS

Si son unos locos por la optimización de un sitio web (igual que yo), les interesara saber que los comentarios de Stylus no se compilan a CSS, lo que quiere decir menos código que leer para el navegador:

Una línea:

// Comentario ...

Multi-línea:
Igual que los comentarios en CSS. Solo salen cuando la opción de compresión no está habilitada.

/** Comentario multi-línea ...
 */

Todos estos temas y mucho más, puedes verlos en la documentación de Stylus: http://stylus-lang.com/

Te recomiendo revisarla y si tienes algo que compartir sobre este pre-procesador, te invito a que lo digas en los comentarios.

Extra: te invito a seguirme en Instagram en donde hablo sobre HTML, CSS, JS, GIT. @fili.js