Stylus es un lenguaje preprocesador de hojas de estilo dinámicas que se compila en hojas de estilo en cascada (CSS). Su diseño está influenciado por Sass and 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 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, opcionalmente se omiten los puntos y coma (;). Por lo tanto, el siguiente CSS:
cuerpo { color : blanco ; } se puede abreviar a:
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 del cuerpo blanco Stylus permite definir variables; sin embargo, 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 las palabras clave. De esta manera, las variables son similares a las variables en Python .
mensaje = '¡Hola mundo!' div :: antes del color del mensaje de contenido # 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 diferentes maneras.
Por ejemplo, si desea definir la propiedad del radio del borde CSS sin tener que utilizar varios prefijos de proveedores, puede crear:
radio-borde ( n ) -webkit-radio-borde n -moz-radio-borde n radio-borde n luego, para incluir esto como un mixin, deberías hacer referencia a él como:
div . radio del borde del rectángulo ( 10px ) esto se compilaría en:
div . rectángulo { -webkit- borde-radio : 10 px ; -moz- radio-borde : 10 px ; radio del borde : 10 px ; } Para incluir variables en argumentos e identificadores, las llaves rodean las variables. Por ejemplo,
-webkit- { 'borde' + '-radio' } evalúa a
-webkit-borde-radio