Preprocesador Stylus

Buen día queridos Invencers la semana pasada hablábamos de los preprocesadores los cuales nos ayudaban a hacer más fácil y rápido el trabajo de los estilos para el diseño de una página web, enfocándonos especialmente en Sass.
El día de hoy hablaremos de otro preprocesador muy famoso y que muchos desarrolladores utilizan el cual es Stylus

Stylus

Stylus es un preprocesador de CSS que nos permite escribir código CSS de manera más eficiente y rápida. Los creadores de Sylus lo describen de la siguiente manera:

Stylus es un nuevo lenguaje revolucionario, proporcionando una forma eficiente, dinámica y expresiva para generar CSS. Soporta tanto una sintaxis con sangría y estilo normal de CSS.

Este preprocesador es muy famoso y utilizado por las siguientes características:

  • No requiere el uso de llaves, dos puntos, comas y punto y coma.
  • Provee una Javascript API.
  • Nos permite hacer uso de variables, funciones, mixins, condicionales
  • Cuenta con una librería llamada nib que nos da muchos mixins para usar.
  • Selectores anidados
  • Funciones aritméticas
  • Compresión de CSS

Instalación

Para la instalación primero necesitamos tener instalado Node.JS el cual lo podrás descargar en esta página: Descargar Node.JS
Después por medio de la linea de comandos nos dirigimos a la carpeta donde se encuentra NodeJS y escribimos el siguiente comando:

npm install stylus -g

Funcionalidad

Para poder utilizar el procesador crearemos un archivo con extensión .styl
En este archivo podemos escribir todos los estilos que necesitamos para darle una cara bonita a nuestra página web por ejemplo el diseño de un circulo donde no usaremos las llaves, los dos puntos y el punto y coma:

.circulo
  background-color red
  width 50px
  height 50px
  border-radius 50%

Al finalizar nuestro archivo de estilos pasaremos a convertirlo a un css y para lograrlo nos colocaremos por medio de la linea de comandos al archivo .styl y ejecutaremos el siguiente comando:

$ stylus circulo.styl

Creando un archivo llamado circulo.css.
Si tu quieres moverlo de lugar por ejemplo a una carpeta llamada css (la carpeta ya debe estar creada) puedes hacerlo con el siguiente comando:

stylus circulo.styl --out css/

Y el archivo circulo.css estará dentro de la carpeta css. Al abrirlo te darás cuenta que el código a cambiado a la forma estándar de un archivo css:

.circulo{
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Variables

Una de las características que tiene este preprocesador y por el cual muchos la utilizan son el uso de variables para no estar repitiendo tanto código o bien solo hacer referencias por ejemplo a una medida que queremos utilizar en varias ocasiones:

medida = 300px
.cuadro
  width medida
  height medida

Al compilarlo el resultado en css será:

.cuadro{
width: 300px;
height: 300px;
}

Recuerda

Al finalizar recuerda que tu archivo html siempre deberá apuntar al archivo que se genera con extensión css para que pueda funcionar:

 <link rel="stylesheet" href="css/circulo.css"> 

Fuentes

Devcode.la

Comparte este Post
  • 2
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    2
    Shares

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *