Stylus (lenguaje de hojas de estilo)

Stylus
Desarrollador(es)
LearnBoost (2011 de marzo del 29 - 2015 de marzo del 26) / Automattic (2015 de marzo del 26 - Present)​ https://stylus-lang.com/
Información general
Extensiones comunes	styl
Apareció en	2011
Diseñado por	TJ Holowaychuk
Última versión en pruebas	(0.53.0​)
Influido por	hojas de estilo en cascada
Sistema operativo	Multiplataforma
Licencia	MIT

Stylus es un lenguaje preprocesador de hojas de estilo dinámico que se compila en hojas de estilo en cascada (CSS). Su diseño está influenciado por Sass y LESS. Está considerado como la cuarta sintaxis de preprocesador CSS más utilizada.​ Fue creado por TJ Holowaychuk, un antiguo programador de Node.js y creador del lenguaje Luna. Está escrito en JADE y Node.js.

Selectores

A diferencia del CSS, que usa llaves para abrir y cerrar los bloques de declaración, se usa la sangría. Además, los puntos y comas (;) se omiten opcionalmente. Por lo tanto, el siguiente CSS:

body {
    color: white;
}

Puede ser acortado a:

body 
    color: white

Además, los dos puntos (:) y las comas (,) también son opcionales; eso significa que lo anterior puede ser escrito como,

body 
    color white

Variables

Stylus permite definir variables, pero a diferencia de LESS y Sass, no utiliza un símbolo para definirlas. Además, la asignación de variables se hace automáticamente separando la propiedad y la(s) palabra(s) clave. De esta manera, las variables son similares a las variables en Python.

message = 'Hola, Mundo!'

div::before
  content message
  color #ffffff

El compilador Stylus traduciría el documento anterior a:

div::before {
  content: 'Hola, Mundo!';
  color: #ffffff;
}

Mixins y funciones

Tanto los mixins como las funciones se definen de la misma manera, pero se aplican de forma diferente.

Por ejemplo, para definir la propiedad border radius de CSS sin tener que usar varios Vendor Prefixes puedes crear:

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

entonces, para incluir esto como una mezcla, te referirías a él como:

div.rectangle 
  border-radius(10px)

...a la que esto se compilaría:

div.rectangle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Interpolación

Para incluir las variables en los argumentos e identificadores, los caracteres de corchetes rodean la(s) variable(s). Por ejemplo,

 -webkit-{'border' + '-radius'}

evalúa a

-webkit-border-radius

Enlaces externos

• Sitio web oficial
• Repositorio de código fuente de Stylus (Git)
• Comparación del código fuente con Sass/SCSS y LESS

• Datos: Q7629737