Less (Hojas de estilo más ágiles; 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 ejecutar en el lado del cliente o del lado del servidor. [2] Diseñado por Alexis Sellier, Less está influenciado por Sass y ha influido en la nueva sintaxis "SCSS" de Sass, que adaptó su sintaxis de formato de bloques similar a CSS. [3] Less es una fuente abierta . Su primera versión fue escrita en Ruby ; sin embargo, en las versiones posteriores, el uso de Ruby ha quedado obsoleto y ha sido reemplazado por JavaScript . La sintaxis con sangría de Less es unametalenguaje 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 de CSS es que Less permite la compilación en tiempo real a través de less.js por parte del navegador. [2] [4]
Diseñada por | Alexis Sellier |
---|---|
Desarrollador | Alexis Sellier y Dmitry Fadeyev |
Apareció por primera vez | 2009 |
Lanzamiento estable | 4.1.1 [1] / 30 de enero de 2021 |
Disciplina de mecanografía | Dinámica |
Lenguaje de implementación | JavaScript |
SO | Multiplataforma |
Licencia | Licencia Apache 2.0 |
Extensiones de nombre de archivo | .menos |
Sitio web | lesscss |
Influenciado por | |
CSS , Sass | |
Influenciado | |
Sass , Less Framework, Bootstrap (v3) |
Características
Variables
Menos permite definir variables. Las variables en Less se definen con un signo (@). 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]
@ pálido-color-verde : # 4D926F ;# header { color : @ pale-green-color ; } h2 { color : @ color-verde-pálido ; }
El código anterior en Less se compilaría con el siguiente código CSS.
# header { color : # 4D926F ; } h2 { color : # 4D926F ; }
Mixins
Mixins permite incrustar todas las propiedades de una clase en otra clase al incluir 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 es compatible con Mixins: cualquier código repetido debe repetirse en cada ubicación. Mixins permite repeticiones de código más eficientes y limpias, así como una alteración de código más fácil. [2]
. esquinas redondeadas ( @radius : 5px 10px 8px 2px ) { -webkit- border-radius : @ radius ; -moz- border-radius : @ radius ; border-radius : @ radius ; }# 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:
# header { -webkit- border-radius : 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 { -kit - web- border-radius : 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 acepta parámetros.
# encabezado { h1 { tamaño de fuente : 26 px ; font-weight : negrita ; } p { tamaño de fuente : 16 px ; a { decoración de texto : ninguna ; color : rojo ; &: hover { border-width : 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 ; font-weight : negrita ; } # encabezado p { tamaño de fuente : 16 px ; } # encabezado p a { decoración de texto : ninguna ; color : rojo ; } # encabezado p a : hover { border-width : 1 px ; color : #fff ; }
Funciones y operaciones
Menos permite operaciones y funciones. Las operaciones permiten sumar, restar, dividir y multiplicar los valores y colores de las propiedades, que se pueden utilizar para crear relaciones complejas entre las propiedades. Las funciones se asignan uno a uno con código JavaScript, lo que permite la manipulación de valores.
@The -border : 1px ; @base -color : # 111 ; @red : # 842210 ;# encabezado { color : @ base-color * 3 ; border-left : @ the-border ; border-right : @ the-border * 3 ; } # pie de página { color : @ base-color + # 003300 ; color del 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 ; }
Comparación
Hablar con descaro a
Tanto Sass como Less son preprocesadores de 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 cosas como las llaves se eliminaron de la sintaxis. Less fue diseñado para estar lo más cerca posible de CSS y, como resultado, el CSS existente se puede usar como código Less válido. [7]
Las versiones más recientes de Sass también introdujeron una sintaxis similar a CSS llamada SCSS (Sassy CSS).
Usar en sitios
Se puede aplicar menos a los sitios de varias formas. Una opción es incluir el archivo JavaScript less.js para convertir el código sobre la marcha. A continuación, el navegador muestra el CSS de salida. Otra opción es convertir 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.
Menos software
Nombre | Descripción | Licencia de software | Plataforma | Funcionalidad |
---|---|---|---|---|
WinLess - GUI de Windows para less.js en Wayback Machine (archivado el 2 de junio de 2015) | Compilador sin GUI | Apache 2.0 [8] | Ventanas | Compilador |
Crujido | Menos editor y compilador (requiere Adobe AIR) | GPL [9] | Windows, Mac OS X | Editor del compilador |
less.js-windows | Utilidad de línea de comandos simple para Windows que compilará archivos * .less en CSS usando less.js. | Licencia MIT [10] | Ventanas | Compilador |
less.app | Menos compilador | Propiedad | Mac OS X | Compilador |
CodeKit | Menos compilador | Propiedad | Mac OS X | Compilador |
LessEngine | Menos compilador | Libre | Complemento OpenCart | Compilador |
SIN SIMPLE | Menos compilador | gratis pero sin licencia explícita [11] | Windows Mac OS X Linux | Compilador |
Alegre | Menos compilador | Ms-PL [12] | Complemento de Visual Studio | Compilador |
Banco de trabajo web Mindscape | Resaltado de sintaxis e IntelliSense for Less y Sass | Propiedad | Complemento de Visual Studio | Resaltado de sintaxis del compilador |
Complemento Eclipse por menos | Complemento Eclipse | EPL 1.0 [13] | Complemento Eclipse | Resaltado de sintaxis Compilador de asistencia de contenido |
mod_less | Módulo Apache2 para compilar Less sobre la marcha | Fuente abierta | Linux | Compilador |
gruñido-contrib-menos | Tarea Grunt de Node.js para convertir Less a CSS | MIT [14] | Node.js | Compilador |
Web Essentials | Extensión de Visual Studio con soporte para Less y Sass | Apache 2.0 [15] | Ventanas | Resaltado de sintaxis, ayuda de contenido, compilador |
clessc | Compilador puro de C ++ | MIT [16] | al menos Windows, Linux, MacOS | Compilador |
Menos WebCompiler | Compilador basado en web | MIT [17] | al menos Windows, Linux, MacOS | Compilador, resaltado de sintaxis, minificador |
Ver también
- Sass (lenguaje de hoja de estilo)
- Stylus (idioma de la hoja de estilo)
Referencias
- ^ El equipo Core Less. "less.js / CHANGELOG.md en master · less / less.js" . GitHub . Consultado el 19 de marzo de 2021 .
- ^ a b c d El equipo Core Less. "Empezando | Less.js" . Less.js . Consultado el 19 de marzo de 2021 .
- ^ a b Weizenbaum, Nathan (17 de junio de 2009). "Sass and Less: Nex3" . Archivado desde el original el 21 de junio de 2009 . Consultado el 19 de marzo de 2021 .
- ^ Meng, Jiew (14 de diciembre de 2010). Mortensen, Peter (ed.). "css - ¿Hay un SASS.js? ¿Algo como LESS.js?" . Desbordamiento de pila . Consultado el 19 de marzo de 2021 .
- ^ Atwood, Jeff (30 de abril de 2010). "¿Qué está mal con CSS" . Codificación del terror . Consultado el 19 de marzo de 2021 .
- ^ El equipo Core Less. "Acerca de | Less.js" . Less.js . Consultado el 19 de marzo de 2021 .
- ^ Eppstein, Chris (10 de noviembre de 2010). "sass_and_less_compared.markdown" . GitHub Gist . Consultado el 19 de marzo de 2021 .
- ^ Lagendijk, Mark (29 de enero de 2013). "Información de licencia · Número 55 · marklagendijk / WinLess" . GitHub . Consultado el 19 de marzo de 2021 .
- ^ Dean, Matthew (2 de diciembre de 2011). "Crunch / LICENSE.txt en master · matthew-dean / Crunch" . GitHub . Consultado el 19 de marzo de 2021 .
- ^ Inteligente, Duncan (25 de julio de 2013). "less.js-windows / LICENCIA en master · duncansmart / less.js-windows" . GitHub . Consultado el 19 de marzo de 2021 .
- ^ Engel, Christian (29 de julio de 2012). "SimpLESS / LICENSE.txt en master · Paratron / SimpLESS" . GitHub . Consultado el 19 de marzo de 2021 .
- ^ Evan Nagle. "Chirpy - VS Add In para el manejo de archivos Js, Css, DotLess y T4 - CodePlex Archive" . CodePlex . Archivado desde el original el 20 de febrero de 2021 . Consultado el 19 de marzo de 2021 .
- ^ Vincent Simonet. "Complemento de Eclipse por MENOS" . normalesup.org . Consultado el 19 de marzo de 2021 .
- ^ Kellen, Tyler (4 de septiembre de 2012). "grunt-contrib-less / LICENCIA-MIT en master · gruntjs / grunt-contrib-less" . GitHub . Consultado el 19 de marzo de 2021 .
- ^ Kristensen, Mads (18 de junio de 2014). "WebEssentials2013 / LICENSE.txt en master · madskristensen / WebEssentials2013" . GitHub . Consultado el 19 de marzo de 2021 .
- ^ Bram van der Kroef (11 de julio de 2017). "clessc / LICENCIA en master · BramvdKroef / clessc" . GitHub . Consultado el 19 de marzo de 2021 .
- ^ SamBrishes (15 de diciembre de 2018). "snout.less / LICENSE.md en master · pytesNET / snout.less" . GitHub . Consultado el 19 de marzo de 2021 .
enlaces externos
- Página web oficial
- Menos repositorio de código fuente (Git)
- Biblioteca de mixins de LESS Hat
- Sai la extensión mixins y el marco de creación de CSS para LESS & SASS / SCSS (Git)
- MENOS Zona de juegos