Less ( Leaner Style Sheets ; a veces estilizado como LESS ) es un lenguaje de hojas de estilo de preprocesador dinámico que se puede compilar en hojas de estilo en cascada (CSS) y ejecutarse en el lado del cliente o del servidor. [2] Diseñado por Alexis Sellier, Less está influenciado por Sass y ha influido en la sintaxis "SCSS" más nueva de Sass, que adaptó su sintaxis de formato de bloque similar a CSS. [3] Less es un proyecto de código abierto . Su primera versión fue escrita en Ruby ; sin embargo, en las versiones posteriores, el uso de Ruby ha quedado obsoleto y reemplazado por JavaScript . La sintaxis sangrada de Less es un metalenguaje anidado , ya que CSS válido es código Less válido con la misma semántica . Less proporciona los siguientes mecanismos: variables , anidamiento , mixins , operadores y funciones ; la principal diferencia entre Less y otros precompiladores CSS es que Less permite la compilación en tiempo real a través de less.js por parte del navegador. [2] [4]
Less permite definir variables. Las variables en Less se definen con un signo arroba (@). La asignación de variables se realiza con dos puntos (:).
Durante la traducción, los valores de las variables se insertan en el documento CSS de salida. [2]
@color pálido-verde : # 4D926F ; # encabezado { color : @ color-verde-pálido ; } h2 { color : @ color-verde-pálido ; } El código anterior en Less se compilaría en el siguiente código CSS.
# encabezado { color : #4D926F ; } h2 { color : #4D926F ; } Los mixins permiten incrustar todas las propiedades de una clase en otra clase incluyendo el nombre de la clase como una de sus propiedades, comportándose así como una especie de constante o variable. También pueden comportarse como funciones y tomar argumentos. CSS no admite mixins: cualquier código repetido debe repetirse en cada ubicación. Los mixins permiten repeticiones de código más eficientes y limpias, así como una modificación más sencilla del código. [2]
. esquinas redondeadas ( @radio : 5px 10px 8px 2px ) { -webkit- radio-borde : @ radio ; -moz- radio-borde : @ radio ; radio-borde : @ radio ; } # encabezado { .esquinas-redondeadas ; } # pie de página { .esquinas-redondeadas(10px 25px 35px 0px) ; } El código anterior en Less se compilaría en el siguiente código CSS:
# encabezado { -webkit- radio del borde : 5 px 10 px 8 px 2 px ; -moz- radio del borde : 5 px 10 px 8 px 2 px ; radio del borde : 5 px 10 px 8 px 2 px ; } # pie de página { -webkit- radio del borde : 10 px 25 px 35 px 0 px ; -moz- radio del borde : 10 px 25 px 35 px 0 px ; radio del borde : 10 px 25 px 35 px 0 px ; } Less tiene un tipo especial de conjunto de reglas llamado mixins paramétricos que se pueden mezclar en clases similares, pero aceptan parámetros.
# encabezado { h1 { tamaño de fuente : 26 px ; peso de fuente : negrita ; } p { tamaño de fuente : 16 px ; a { decoración de texto : ninguna ; color : rojo ; &:hover { ancho del borde : 1 px ; color : #fff ; } } } } El código anterior en Less se compilaría en el siguiente código CSS:
# encabezado h1 { tamaño de fuente : 26 px ; peso de fuente : negrita ; } # encabezado p { tamaño de fuente : 16 px ; } # encabezado p a { decoración de texto : ninguna ; color : rojo ; } # encabezado p a : hover { ancho de borde : 1 px ; color : #fff ; } Less permite realizar operaciones y funciones. Las operaciones permiten sumar, restar, dividir y multiplicar valores de propiedades y colores, lo que se puede utilizar para crear relaciones complejas entre propiedades. Las funciones se asignan de forma unívoca al código JavaScript, lo que permite manipular valores.
@el -borde : 1px ; @base -color : # 111 ; @rojo : # 842210 ; # encabezado { color : @ color-base * 3 ; borde-izquierdo : @ el-borde ; borde-derecho : @ el-borde * 3 ; } # pie-de-página { color : @ color-base + #003300 ; color-borde : desaturar ( @ rojo , 10 % ); } El código anterior en Less se compilaría en el siguiente código CSS:
# encabezado { color : #333 ; borde izquierdo : 1 px ; borde derecho : 3 px ; } # pie de página { color : #114411 ; color del borde : #7d2717 ; } Tanto Sass como Less son preprocesadores CSS que permiten escribir CSS limpio en una construcción de programación en lugar de reglas estáticas. [5]
Less está inspirado en Sass. [6] [3] Sass fue diseñado para simplificar y extender CSS, por lo que se eliminaron elementos como las llaves de la sintaxis. Less fue diseñado para ser lo más parecido posible a CSS y, como resultado, el CSS existente se puede usar como código válido de Less. [7]
Las versiones más nuevas de Sass también introdujeron una sintaxis similar a CSS llamada SCSS (Sassy CSS).
Less se puede aplicar a los sitios de varias maneras. Una opción es incluir el archivo JavaScript less.js para convertir el código sobre la marcha. Luego, el navegador muestra el CSS de salida. Otra opción es mostrar el código Less en CSS puro y cargar el CSS en un sitio. Con esta opción, no se cargan archivos .less y el sitio no necesita el convertidor de JavaScript less.js.