Our Blog

Stylus: Otra forma de crear nuestros estilos

Hoy en día cuando creamos nuestras hojas de estilos caemos irremediablemente en la tarea de tener que escribir parte de nuestros estilos una y otra vez lo cual se vuelve una tarea tediosa. Ahora bien que pasa cuando tenemos que modificar el valor de un atributo que se encuentra en muchos lugares, vuelve a suceder lo mismo que en caso anterior deberemos recorrer nuestras hojas de estilos modificando este valor pudiendo suceder que nos olvidemos de reemplazar el viejo valor en algún estilo.

Este tipo de problemas entre otros son resueltos con el uso Stylus, el cual nos permite de manera simple reducir la cantidad de código que escribimos

¿Que es?

Stylus es un pre-procesador de CSS de código abierto (open-source),  al igual que lo son Sass y Less, le añaden nuevas funcionalidades a las clásicas hojas de estilos permitiendo entre otras cosas la utilización de variables, funciones con determinadas tipo de operaciones.

Ahora quizás la pregunta que se les puede ocurrir al leer estas lineas es “Que es realmente un pre-procesador de CSS?”, la respuesta a esta pregunta es que un pre-procesador es una herramienta que nos ayuda a optimizar y administrar fácilmente nuestras hojas de estilo permitiendo por medio de una sentencia muy simple generar el correspondiente código CSS para que los navegadores web puedan interpretarlo.

¿Como lo instalo?

Para poder usar Stylus debemos previamente tener instalado npm el cual ya viene incluido en las ultimas versiones de NodeJs. Para los que no tengan instalado NodeJs la forma de instalarlo es bastante sencilla ya que para el caso de Windows existe un instalador tipo wizard en la pagina oficial, para el caso de sistemas operativos Linux lo podremos hacer por linea de comandos ejecutando lo siguiente:

sudo apt-get install nodejs
sudo apt-get install npm

Una vez que contemos con npm en nuestro sistema operativo lo único que deberemos hacer es ejecutar el siguiente comando:

npm install -g stylus

Para los que no sepan como funciona npm, lo que hará es descargar e instalar la librería y debido a que hemos colocado como parámetro -g la misma podrá ser usada desde cualquier directorio.

Características

Stylus cuenta varias características que mejoran la creación de nuestras hojas de estilos, algunas de las cuales también comparte con el resto de los pre-procesadores de CSS.

Eliminación de cosas innecesarias (llaves, punto y coma)

La idea de esto es dotar a Stylus de un lenguaje lo mas sencillo posible sin tener que caer en la necesidad de colocar las llaves de apertura y cierre y los : (punto y coma) para separar los atributos, la idea es que mientras se encuentre bien tabulado y con los espacios correspondientes el pre-procesador podrá identificar de manera correcta esto y generar el CSS.

Stylus CSS
body

background-color blue

font-size 1.2em

body {

background-color: blue;

font-size: 1.2em;

}

Variables

En el uso cotidiano de las hojas de estilos (CSS) debemos repetir en varios lugares los mismos valores para distintos atributos, para este tipo de situación Stylus nos provee el uso de variables al igual que en cualquier lenguaje de programación.

Stylus CSS
color_azul = #0000FF

body

background-color color_azul

font-size 1.2em

body {

background-color: #0000FF;

font-size: 1.2em;

}

Mixins

Los mixins son fragmentos de código que poseen uno o varios atributos que ya poseen ciertos valores (o pueden recibirlos por medio de parámetros) y ser utilizados dentro de otras clases como si fuera un atributo mas.

Stylus CSS
border-radius(a)

border-radius a

.btn

border-radius(10px)

.btn {

border-radius: 10px;

}

Funciones

Stylus nos provee de una serie de funciones que ya se encuentran definidas, las cuales nos permiten entre otras cosas modificar colores, concatenar cadenas o realizar operaciones matemáticas. En este link encontraran la descripción de las funciones mas importantes con ejemplos de las mismas.

¿Como compilo el archivo?

Para generar el archivo CSS a partir de uno Stylus deberíamos ejecutar el siguiente comando por consola:

stylus -c archivo.styl

Ahora bien el mayor problema de realizar este tipo de compilación es que si realizamos cambios constantemente en el archivo porque estamos definiendo los estilos deberemos compilarlo en forma recurrente para evitar esto podemos indicarle a Stylus que observe los cambios que sufre el archivo y cuando encuentre uno vuelva a compilarlo, para esto deberemos agregar un parámetro (-w) a la hora de compilar el archivo:

stylus -c -w archivo.styl

¿Como hago para convertir mis hojas de estilo existentes a Stylus?

Muchas veces vemos las ventajas que nos provee un pre-compilador y nos decidimos a comenzar a usarlo pero nuestras hojas de estilos ya se encuentran creadas, si nuestra idea es pasarla a Stylus existe el siguiente link donde podrán pegar todo el código CSS y les generara el correspondiente en Stylus.

Conclusión

Como hemos visto en este post introductorio, Stylus nos provee varias ventajas comparado con el uso clásico de hojas de estilos. Ademas nos permite olvidarnos de lo que son los ; (punto y comas), los paréntesis entre otras cosas lo cual simplifica bastante a la hora de estar escribiendo los estilos.

En futuros post haremos hincapié en alguno de los puntos mencionados en este con mayor detalle.

1 comment
TeraswapStylus: Otra forma de crear nuestros estilos

Related Posts