Stylus (lenguaje de hojas de estilo)

De Wikipedia, la enciclopedia libre
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
Extensiones comunes styl
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
[editar datos en Wikidata]

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.

Selectores[editar]

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[editar]

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[editar]

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[editar]

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[editar]

  1. ↑ «LICENSE». GitHub. 26 de marzo de 2015. Consultado el 21 de diciembre de 2015. 
  2. ↑ «Release 0.53.0». GitHub. 14 de diciembre de 2015. Consultado el 21 de diciembre de 2015. 
  3. ↑ Poll Results: Popularity of CSS Preprocessors

Enlaces externos[editar]

Obtenido de «https://es.wikipedia.org/w/index.php?title=Stylus_(lenguaje_de_hojas_de_estilo)&oldid=130567683»