Stylus es un lenguaje de preprocesamiento 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 . Se considera la cuarta sintaxis de preprocesador CSS más utilizada. [3] Fue creado por TJ Holowaychuk, un ex programador de Node.js y el creador del lenguaje Luna. Está escrito en JADE y Node.js.
A diferencia de CSS, que utiliza llaves para abrir y cerrar bloques de declaración, se utiliza sangría. Además, se omiten opcionalmente los puntos y comas (;). Por lo tanto, el siguiente CSS:
cuerpo { color : blanco ; } Se puede abreviar como:
Color del cuerpo : blanco Además, los dos puntos (:) y las comas (,) también son opcionales; eso significa que lo anterior se puede escribir como:
color de carrocería blanco Stylus permite definir variables, pero a diferencia de Less y Sass, no utiliza un símbolo para definir variables. Además, la asignación de variables se realiza automáticamente separando la propiedad y la(s) palabra(s) clave. De esta manera, las variables son similares a las variables en Python .
mensaje = '¡Hola, mundo!' div :: antes del contenido mensaje color # ffffff El compilador Stylus traduciría el documento anterior a:
div :: antes { contenido : '¡Hola, mundo!' ; color : #ffffff ; } Tanto los mixins como las funciones se definen de la misma manera, pero se aplican de formas diferentes.
Por ejemplo, si desea definir la propiedad de radio del borde CSS sin tener que usar varios prefijos de proveedor, puede crear:
radio del borde ( n ) -webkit-border-radius n -moz-border-radius n radio del borde n Luego, para incluir esto como un mixin, deberás hacer referencia a él como:
div . rectángulo radio del borde ( 10px ) Esto se compilaría así:
div . rectángulo { -webkit- radio del borde : 10 px ; -moz- radio del borde : 10 px ; radio del borde : 10 px ; } Para incluir variables en argumentos e identificadores, las variables se colocan entre llaves. Por ejemplo,
-webkit- { 'borde' + '-radio' } evalúa a
-radio del borde de webkit