Do you want to switch to Platzi in English?
3
Aprende qué es Stylus y cómo instalarlo

720Puntos

hace 3 años

Curso de Stylus
Curso de Stylus

Curso de Stylus

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:

[css]body font 14px/1.5 Helvetica, arial, sans-serif button button.button input[type=‘button’] input[type=‘submit’] border-radius 5px [/css]

  • 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: [css]body { font: 14px/1.5 Helvetica, arial, sans-serif; } body button, body button.button, body input[type=‘button’], body input[type=‘submit’] { border-radius: 5px; } [/css]

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, aquí encontrarás toda la información --> https://platzi.com/cursos/stylus/

Curso de Stylus
Curso de Stylus

Curso de Stylus

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