Stylus (lenguaje de hojas de estilo)
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.[3] Fue creado por TJ Holowaychuk, un antiguo programador de Node.js y creador del lenguaje Luna. Está escrito en JADE y Node.js.
| Stylus | ||
|---|---|---|
| Desarrollador(es) | ||
| LearnBoost (2011 de marzo del 29 - 2015 de marzo del 26) / Automattic (2015 de marzo del 26 - Present)[1] https://stylus-lang.com/ | ||
| Información general | ||
| Apareció en | 2011 | |
| Diseñado por | TJ Holowaychuk | |
| Última versión en pruebas | (0.53.0[2]) | |
| Influido por | hojas de estilo en cascada | |
| Sistema operativo | Multiplataforma | |
| Licencia | MIT | |
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 Referencias
- «LICENSE». GitHub. 26 de marzo de 2015. Consultado el 21 de diciembre de 2015.
- «Release 0.53.0». GitHub. 14 de diciembre de 2015. Consultado el 21 de diciembre de 2015.
- Poll Results: Popularity of CSS Preprocessors
Enlaces externos
- Página web oficial
- Repositorio de código fuente de Stylus (Git)
- Comparación del código fuente con Sass/SCSS y LESS