Stylus, un lenguaje de hojas de estilo dinámico

por .

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

Categorizado en: