| MENOS | |
|---|---|
| clase de idioma | Lenguaje de hojas de estilo , software libre , preprocesador y librería de funciones |
| Apareció en | 2009 |
| Autor | Alexis Sellier |
| Desarrollador | Alexis SellierDmitry Fadeev |
| Liberar | 4.1.3 ( 9 de junio de 2022 ) |
| sistema de tipos | dinámica |
| sido influenciado | CSS , Sass |
| influenciado | Sass , menos marco |
| Licencia | Licencia Apache 2 |
| Sitio web | lesscss.org |
| sistema operativo | multiplataforma |
LESS (Leaner Style Sheets, hoja de estilo compacta) es un lenguaje de estilo dinámico desarrollado por Alexis Sellier. Fue influenciado por el lenguaje de estilo Sass y, a su vez, influyó en su nueva sintaxis "SCSS", que también usa una sintaxis que es una extensión de CSS [1] .
LESS es un producto de código abierto . Su primera versión fue escrita en Ruby , pero en versiones posteriores se decidió abandonar el uso de este lenguaje de programación en favor de JavaScript . Less es un metalenguaje anidado : un CSS válido sería un programa less válido con una semántica similar .
LESS proporciona las siguientes extensiones CSS: variables , bloques anidados, mixins , operadores y funciones [2] .
LESS puede ejecutarse en el lado del cliente ( Internet Explorer 6+ , WebKit , Firefox ) o en el lado del servidor ejecutando Node.js o Rhino [2] .
Less le permite usar variables. El nombre de la variable está precedido por el símbolo @ . Los dos puntos (:) se utilizan como signo de asignación .
Al traducir, el valor de la variable se sustituye en el documento CSS resultante [2] .
@color : # 4D926F ; _ # encabezado { color : @ color ; } h2 { color : @ color ; }Este código LESS se compilará en el siguiente archivo CSS:
# encabezado { color : #4D926F ; } h2 { color : #4D926F ; }Los mixins le permiten incluir un conjunto completo de propiedades de un conjunto de reglas a otro al incluir el nombre de una clase como una de las propiedades de otra clase. Este comportamiento puede considerarse como una especie de constante o variable. También pueden comportarse como funciones tomando argumentos. En CSS puro, el código repetido debe repetirse en varios lugares: los mixins hacen que el código sea más limpio, más claro y más fácil de cambiar [2] .
. esquinas redondeadas ( @ radio : 4px ) { -webkit-border-radius : @ radio ; -moz-border-radio : @ radio ; borde-radio : @ radio ; } # encabezado { .esquinas redondeadas ; } # pie de página { .esquinas redondeadas(10px) ; }Este código LESS se compilará en el siguiente archivo CSS:
# encabezado { -webkit -border-radius : 4 px ; -moz- borde-radio : 4 px ; borde - radio : 4px } # pie de página { -webkit -border-radius : 10 px ; -moz- borde-radio : 10 px ; borde - radio : 10px }LESS hace posible anidar definiciones en lugar de o junto con la cascada. Por ejemplo, digamos que tenemos este CSS: CSS admite cascada lógica, pero un bloque de código no se puede anidar dentro de otro. Menos le permite anidar un selector dentro de otro. Esto hace que la herencia sea más clara y acorta las hojas de estilo [2] .
# encabezado { h1 { tamaño de fuente : 26 px ; fuente-peso : negrita ; } p { tamaño de fuente : 12 px ; a { decoración de texto : ninguno ; &: pasar { borde -ancho : 1px } } } }Este código LESS se compilará en el siguiente archivo CSS:
# encabezado h1 { tamaño de fuente : 26 px ; fuente-peso : negrita ; } # encabezado p { tamaño de fuente : 12 px ; } # encabezado p a { texto-decoración : ninguno ; } # header p a : hover { border-width : 1 px ; }Less le permite usar operaciones y funciones. Las operaciones le permiten sumar, restar, dividir y multiplicar valores de propiedades y colores, que se pueden usar para crear relaciones complejas entre propiedades. Las funciones se asignan uno a uno al código JavaScript, lo que permite procesar los valores.
@ el borde : 1px ; @ base-color : # 111 ; @ rojo : # 842210 ; # encabezado { color : @ base-color * 3 ; borde izquierdo : @ el borde ; borde derecho : @ el borde * 2 ; } # pie de página { color : @ base-color + #003300 ; border-color : desaturar ( @ red , 10 % ); }Este código LESS se compilará en el siguiente archivo CSS:
# encabezado { color : #333 ; borde - izquierda : 1px borde - derecho : 2px } # pie de página { color : #114411 ; color de borde : #7d2717 ; }Tanto Sass como LESS son preprocesadores de CSS que le permiten escribir CSS limpio utilizando construcciones de programación en lugar de reglas estáticas [3] .
LESS está inspirado en Sass [4] . Sass fue diseñado para simplificar y extender CSS, las llaves se eliminaron de la sintaxis en las primeras versiones (esta sintaxis se llama sass ). LESS está diseñado para estar lo más cerca posible de CSS, por lo que tienen la misma sintaxis. Como resultado, el CSS existente se puede usar como código LESS. Las versiones más nuevas de Sass también incluyen una sintaxis similar a CSS llamada SCSS (Sassy CSS) [1] .
Ver Sass/Less Comparison [5] para una comparación de sintaxis detallada .
ZUSS ( ZK User-interface Style Sheet) [6] es un lenguaje de estilo basado en las ideas de LESS. Tiene una sintaxis similar, excepto que está destinado a ser utilizado en el lado del servidor junto con el lenguaje de programación Java . No utiliza un intérprete de JavaScript ( Rhino ), pero le permite llamar directamente a los métodos de Java.
LESS se puede usar en un sitio web de varias maneras. Una opción es conectar el archivo JavaScript less.js desde su sitio oficial lesscss.org a la página web para convertir el código a CSS sobre la marcha, utilizando el navegador.
Esto se hace, por ejemplo, usando el siguiente código html:
< enlace rel = "hoja de estilo/menos" tipo = "texto/css" href = "estilos.menos" > < script src = "menos.js" tipo = "texto/javascript" ></ script >Si está utilizando Rhino del lado del servidor JavaScript o node.js , puede convertir archivos .less a .css en el lado del servidor.
Finalmente, existen implementaciones de terceros del lenguaje: por ejemplo, el compilador de código abierto SimpLESS para Windows , Linux y Mac OS X [7] , .less{}, una implementación para .NET framework [8] o lessphp [9 ] , que le permite compilar menos estilos en el lado del servidor para sitios PHP .
| Lenguajes de hojas de estilo ( compare , list ) | |
|---|---|
| Modos |
|
| Estándar | |
| no estándar |
|