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.Poll Results: Popularity of CSS Preprocessors 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: whiteAdemá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 #ffffffEl 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 nentonces, 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
Enlaces externos
Repositorio de código fuente de Stylus (Git) Comparación del código fuente con Sass/SCSS y LESS
Categoría:Lenguajes de hojas de estilo Categoría:Software que utiliza la licencia MIT Categoría:Introducciones relacionadas a la ciencia de la computación de 2010