Diseño webTutoriales

Cómo usar Stylus, preprocesador CSS

cómo usar stylus

En este artículo explico cómo usar Stylus, preprocesador CSS que hace parte de un grupo de herramientas muy útiles para agilizar la escritura de este lenguaje de diseño y arquitectura web haciendo el trabajo tedioso por nosotros, es decir, por ejemplo, con ellos omitimos la escrituras de puntos y comas, llaves, corchetes, códigos hexadecimales, etc.

Pero no solo tienen una función de reducción de código, sino que, por decirlo de manera general, convierten a CSS casi que en un lenguaje de programación, lo que permite utilizar secuencias lógicas, variables, operadores, entre otras características.

Bien, después de esa breve introducción, hablemos de Stylus, preprocesador creado por TJ Holowaychuc que utiliza NodeJS.

Instalación

-Es necesario instalar Node.js en Windows (en caso de ser su sistema operativo), es muy sencillo.-

  1. Descargar e instalar de nodejs.org, la versión recomendada e instalar como cualquier programa.
  2. Ingresar a la consola de Windows y escribir el siguiente comando: $ npm install stylus –g y pulsar enter.

Con esto quedan instalados tanto NodeJS como Stylus.

Uso

Es necesario saber que al utilizar stylus, no se trabaja directamente sobre el archivo estilos.css, sino que el código se escribe en un archivo denominado estilos.styl (muy importante esa terminación), por lo que tendríamos dos archivos de estilos en la carpeta css.

Ahora, es necesario acudir a la consola que proporcionan NodeJs y Stylus cuando son instalados, una vez allí, se accede mediante el comando cd (change directory) a la carpeta css donde está ubicado el archivo css, llámese estilos.css o cual sea.

A continuación se escribe el comando stylus, seguido del nombre del archivo con formato .styl, que puede ser estilos.styl, seguido de un espacio y los comandos –c –w. Con esto, stylus lee el código del archivo .STYL y lo compila en el archivo .CSS.

Para tener mayor claridad, relaciono un video-guía sobre el uso y las reglas básicas para utilizar Stylus y sus propiedades en cuanto a la declaración y uso de variables y funciones, entre otras características.

Lea también: El lenguaje de la web, un idioma para el “nuevo mundo”

Comenta en Facebook