Stylus es un lenguaje de 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 . 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 .
Diseñada por | TJ Holowaychuk |
---|---|
Desarrollador | LearnBoost (29 de marzo de 2011 - 26 de marzo de 2015 ) / Automattic (26 de marzo de 2015 - presente) [1] |
Apareció por primera vez | 2010 |
Lanzamiento estable | 0.54.8 [2] / 16 de julio de 2020 |
Disciplina de mecanografía | dinámica |
SO | Multiplataforma |
Licencia | Licencia MIT |
Extensiones de nombre de archivo | .styl |
Sitio web | Lápiz ( Github ) |
Influenciado por | |
CSS , Sass , MENOS |
Selectores
A diferencia de CSS, que usa llaves para abrir y cerrar bloques de declaración, se usa sangría. Además, los puntos y coma (;) se omiten opcionalmente. 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 de cuerpo blanco
Variables
Stylus permite definir variables, sin embargo, a diferencia de LESS y Sass, no usa 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 forma, las variables son similares a las variables en Python .
message = '¡Hola, mundo!'div :: antes del color del mensaje de contenido # ffffff
El compilador Stylus traduciría el documento anterior a:
div :: before { content : '¡Hola, mundo!' ; color : #ffffff ; }
Mixins y funciones
Tanto las mezclas 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 de CSS sin tener que usar varios Prefijos de proveedor , puede crear:
border-radius ( n ) -webkit-border-radius n -moz-border-radius n border-radius n
luego, para incluir esto como un mixin, lo haría referencia como:
div . radio del borde del rectángulo ( 10px )
esto se compilaría para:
div . rectángulo { -webkit- border-radius : 10 px ; -moz- radio-borde : 10 px ; radio del borde : 10 px ; }
Interpolación
Para incluir variables en argumentos e identificadores, las llaves rodean las variables. Por ejemplo,
-webkit- { 'borde' + '-radius' }
evalúa a
-webkit-border-radius
Referencias
- ^ "LICENCIA" . GitHub . 2015-03-26 . Consultado el 21 de diciembre de 2015 .
- ^ "Liberar 0.54.8" . GitHub . 2020-07-16 . Consultado el 6 de abril de 2021 .
- ^ Resultados de la encuesta: popularidad de los preprocesadores CSS