Stylus, utilizando a fondo su sintaxis

Aprendamos como usar las variables, condicionales, mixin, funciones y más 
Parte 5 de 5

En este tutorial vamos a aprender como usar en CSS con Stylus

  • Variables
  • Mixins
  • Operadores Lógicos
  • Funciones
  • Comentarios
  • Condicionales

¡Empecemos!

Variables

En stylus podemos crear muchas variables, que podemos reutilizar a lo largo de nuestro código y se declaran de la siguiente forma:

 Resultado CSS

Al compilar, Stylus toma la variable y lo imprime con el valor que tiene. En esta caso, imprime el valor hexadecimal.

En una variable podemos guardar muchos datos, en este ejemplo guardamos un hexadecimal.

Si quieren más información acerca de variables, pueden ver la documentación http://learnboost.github.io/stylus/docs/variables.html

Mixins

A veces es molesto, que para un atributo o propiedad, tengamos que escribirles todos los prefijos para sea visualice en todos los exploradores.

Para eso se inventó los Mixins, observemos cómo funciona:

 Resultado CSS

 Analicemos varios puntos:

  • Al inicio, incluimos la línea @import "nib".
    Esta librería es necesaria para que Stylus compile los mixins. No olvidemos que si usamos el preposs app para compilar, tenemos que seleccionar la casilla Use Nib o si no saldría un error al compilar.
  • Copiamos el código general y stylus se encarga de ponerle los prefijos de los otros exploradores. Ejemplo del código original:

Observemos otro ejemplo:

 Resultado CSS

 Creamos un mixin personalizados, escribimos sus atributos y prefijos y le asignamos el valor de una variable

Para más información en http://learnboost.github.io/stylus/docs/mixins.html

Operadores

Podemos sumar, restar, multiplicar o dividir los valores numéricos de nuestras propiedades. Miremos los ejemplos:

 Resultado CSS

 Funciones

Algo impresionante de stylus es que podemos crear funciones, así como lo podemos hacer con php, javascript, etc.

 Resultado CSS

 Puedes llamar la función, cuantas veces queramos y le enviamos los valores (en este ejemplo son dos valores).

Observa más ejemplos en la documentación http://learnboost.github.io/stylus/docs/functions.html

Comentarios

En stylus podemos usar diferentes formas para hacer comentarios:

Condicionales

Esto también me parece impresionante, poder usar condicionales para generar código CSS. Observemos como funciona:

 Resultado CSS

 Conclusión

Este es el final de este tutorial, como ven Stylus es una gran herramienta que nos facilita mucho y nos ahorra mucho tiempo cuando escribimos código CSS. 

Los animo que investiguen un poco más la documentación, esta es http://learnboost.github.io/stylus/

Intente ser lo más detallado posible para explicar stylus, espero que les haya quedado claro, si tienen dudas o inquietudes, pueden escribirme en los comentarios, estaré pendiente para responderles.

Aquí pueden descargar el archivo fuente Descargar Archivos Fuentes

 No olviden seguirme en twitter @juksoto y hasta la próxima.

 

 

Etiquetas:, , , ,

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en