0

Stylus, un lenguaje de hojas de estilo dinámico

Stylus es un nuevo lenguaje dinámico para la creación de hojas de estilos de una manera más eficiente y rápida.

Este lenguaje vendría a competir directamente con alternativas similares como pueden ser LESS o SASS. Stylus soporta una sintaxis simple basada en tabulaciones, permitiendo de esta manera tener un código ordenado y limpio.

stylus, el lenguaje de hojas de estilo dinamico para node.js

Instalación
$ npm install stylus
Ejemplo de uso:
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments

body a
font: 12px/1.4 “Lucida Grande”, Arial, sans-serif
background: black
color: #ccc

form input
padding: 5px
border: 1px solid
border-radius: 5px
Resultado:
body a {
font: 12px/1.4 “Lucida Grande”, Arial, sans-serif;

background: #000;
color: #ccc;
}
form input {
padding: 5px;
border: 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Como pueden ver el lenguaje se compila, esto es un punto bastante favorable ya que evitamos que por cada solicitud se tenga que interpretar el archivo, ganando bastantes puntos de cara al rendimiento de nuestros proyectos.

El proyecto todavía es nuevo y cuenta con varios aspectos a mejorar, no obstante como alternativa es muy interesante, en especial cuando hablamos de hojas de estilo y eficiencia a la hora de escribirlas, sin lugar a dudas uno de los puntos más flojos y que no mejoró, al menos de forma nativa, con los años.

Les recomiendo visitar la documentación oficial en donde van a encontrar tutoriales, y varios screencast, con información acerca del uso de este nuevo lenguaje dinámico.

Web: Stylus

 

Leave a reply