Aprende qué es Stylus y cómo
instalarlo
Es un pre-procesador de CSS que nace de la necesidad de optimizar
nuestras hojas de estilo. Gracias a sus características y funcionalidades,
podemos eliminar las limitaciones que trae consigo CSS y olvidarnos de
esas tareas repetitivas, complejas y frustrantes a las que estábamos
acostumbrados.
Las principales características de Stylus son:
Ofrece todas las capacidades de un pre-procesador estándar
Paréntesis, llaves, comas, puntos y comas son opcionales
Uso de variables
Mixins y una librería llamada nib que hace más poderosa esta función
Uso de funciones
Funciones aritméticas
Selectores anidados
Compresión de CSS
JavaScript API
Y muchas más características que podrás encontrar en su página web
aquí.
¡Vamos a la acción!Para instalar Stylus en nuestro equipo, debemos
tener una instalación previa de Node,js, pues está basado en el
[Link] a la página de Node,js, donde encontraremos la
versión para Windows, Mac y Linux.
Después de Node,js pasaremos a instalar [Link] una terminal
de Windows y nos dirigimos a la carpeta de Node,js (Program
Files).Escribimos la siguiente línea: npm install stylus –gLuego, para
verificar que esté instalado correctamente escribimos: npm –vEn la
siguiente imagen se describe el proceso:
¡La instalación de Stylus ha sido todo un éxito!Ahora realizaremos
una [Link] creé un archivo con extensión styl llamado
([Link]) con el siguiente código:
body
font 14px/1.5 Helvetica, arial, sans-serif
button [Link]
input[type='button']
input[type='submit']
border-radius 5px
Abrí nuevamente mi consola de Windows y me dirigí a la carpeta donde
tenía el archivo ([Link])Para compilar mi archivo debo escribir en mi
consola de Windows el código: “stylus [Link]” De esta forma, Stylus
me genera un nuevo archivo con extensión .CSS
Que se verá de la siguiente forma:
body{
font: 14px/1.5 Helvetica, arial, sans-serif;}
body button,body [Link],
body input[type='button'],
body input[type='submit']{ border-radius: 5px;}
Este es un ejemplo básico en el que podemos apreciar el poder que tiene
Stylus como pre-procesador. Aunque, para empezar a utilizarlo, lo ideal
sería tener un grado medio/alto de experiencia con CSS; para no
cometer errores o desesperarnos en el proceso.
