8

Aprende qué es Stylus y cómo instalarlo

811Puntos

hace 6 años

Curso de Stylus 2018
Curso de Stylus 2018

Curso de Stylus 2018

Un preprocesador es una herramienta que nos permite escribir pseudo-código que más adelante es convertido a CSS. Stylus es un preprocesador expresivo, dinámico y robusto. Esta herramienta es fácilmente instalada con Node.js y es compilada como CSS. Aprende a crear variables, bucles, funciones y modularidad. Crea un framework como base de CSS para construir tus propios proyectos.

¿Qué es Stylus?

Stylus 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 mismo.

Ingresamos a la página de Node,js, donde encontraremos la versión para Windows, Mac y Linux.

dowloadnodejs pagina inicial

Después de Node,js pasaremos a instalar Stylus.

  • Abrimos una terminal de Windows y nos dirigimos a la carpeta de Node,js (Program Files).
  • Escribimos la siguiente línea: npm install stylus –g
  • Luego, para verificar que esté instalado correctamente escribimos: npm –v

En la siguiente imagen se describe el proceso:

Consola CMD windows

¡La instalación de Stylus ha sido todo un éxito!

Ahora realizaremos una prueba.

  • Inicialmente creé un archivo con extensión styl llamado (Estilo.styl) con el siguiente código:
bodyfont14px/1.5 Helvetica, arial, sans-serif 

buttonbutton.buttoninput[type='button'] input[type='submit'] 
     border-radius5px
  • Abrí nuevamente mi consola de Windows y me dirigí a la carpeta donde tenía el archivo (Estilo.styl)
  • Para compilar mi archivo debo escribir en mi consola de Windows el código: “stylus estilo.styl” De esta forma, Stylus me genera un nuevo archivo con extensión .CSS
Compilacion

Que se verá de la siguiente forma:

body { 
    font: 14px/1.5 Helvetica, arial, sans-serif; 
} 

bodybutton, bodybutton.button, bodyinput[type='button'], bodyinput[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.

¡Stylus tiene mucho más! ¿Quieres aprender a hacer mixins, variables y funciones? Vamos a aprenderlo todo en nuevo curso de Stylus en Platzi.

Curso de Stylus 2018
Curso de Stylus 2018

Curso de Stylus 2018

Un preprocesador es una herramienta que nos permite escribir pseudo-código que más adelante es convertido a CSS. Stylus es un preprocesador expresivo, dinámico y robusto. Esta herramienta es fácilmente instalada con Node.js y es compilada como CSS. Aprende a crear variables, bucles, funciones y modularidad. Crea un framework como base de CSS para construir tus propios proyectos.
Escribe tu comentario
+ 2
1
1991Puntos

Alguien tiene una solución al siguiente problema al instalar Stylus en Windows:

C:\program files\nodejs> npm install stylus -g
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
C:\Users\Alfonso Cardenas\AppData\Roaming\npm\stylus -> C:\Users\Alfonso Cardenas\AppData\Roaming\npm\node_modules\stylus\bin\stylus