Primeros pasos con Stylus CSS

Pequeño tutorial sobre como escribir css de manera correcta usando Stylus

Uno de los problemas de codificación, es la manera correcta y precisa de escribir css. Muchos de los diseñadores web y/o programadores o cualquiera que sienta pasión por la tecnología web, se ha visto envuelto en este tipo de problemas.
Tratar de escribir css sin repetir código, mantener de manera sencilla y rápida nuestro proyecto web, puede convertirse en un arduo trabajo. Pero no te preocupes porque la solución llego y se llama Pre-Procesadores css, hoy en día existen muchos como son: less, sass, STYLUS (mi favorito).

Para los amantes al orden, al fácil acceso de datos y al sencillo mantenimiento, y para aquellos que buscan nuevos paradigmas como python, pues este es el camino mas correcto a elegir.

En esta oportunidad te mostraré un pequeño tutorial sobre el uso correcto de css usando Stylus.

Si no sabes como instalar y configurar nuestro Pre-procesador Stylus en Windows te dejo el siguiente manual.   

1.Uso de clases

.primeraClase

background-color red

font-size 16px

&:hover 

background-color blue

color white

Resultado de nuestro .css :

.primeraClase{background-color:red;font-size:16px;}.primeraClase:hover{background-color:blue;color:white;}

2.Uso de Id

#primerId

background-color yellow

font-size 20px

&:visited

color black

Resultado de nuestro .css :

#primerId{background-color:yellow;font-size:20px;}#primerId:visited{color:black;}

3.Uso de Variables

colorVariable = red

.clase, #id

color colorVariable

Resultado de nuestro .css :

.clase,#id{color:red;}

4.Uso de Operadores Matemáticos 

tamanoletra = 16px

.clase, #id

font-size tamanoletra + 2px /*adición*/

font-size tamanoletra * 2px /*multiplicación*/

font-size tamanoletra - 2px /*resta*/

font-size (tamanoletra / 2px) /*división*/

Resultado de nuestro .css :

.clase,#id{font-size:18px;}/*para la adición*/

5.Uso de Mixins

mixins(variable)

   -webkit-border-radius variable

   -moz-border-radius variable

   -o-border-radius variable

   border-radius variable

.clase, #id

   mixins 5px

Resultado de nuestro .css

.clase,#id{-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;}

Explicación: & = al nombre de la clase o id al que pertenece

Espero tengan una idea mas clara acerca de cómo estilizar de manera correcta nuestra web usando Stylus.

Es una gran ventaja tener nuestro  css comprimido, de esa manera permitirá la rápida carga de la pagina web. MUY IMPORTANTE PARA LOS ROBOTS DE GOOGLE