MENOS - Guía rápida
LESS es un preprocesador de CSS que permite una hoja de estilo personalizable, administrable y reutilizable para un sitio web. LESS es un lenguaje de hoja de estilo dinámico que amplía la capacidad de CSS. LESS también es compatible con todos los navegadores.
El preprocesador de CSS es un lenguaje de secuencias de comandos que amplía CSS y se compila en la sintaxis CSS normal, de modo que su navegador web pueda leerlo. Proporciona funcionalidades como variables , funciones , mixins y operaciones que le permiten construir CSS dinámico.
¿Por qué MENOS?
Ahora entendamos por qué usamos MENOS.
LESS admite la creación de CSS más limpio y compatible con todos los navegadores de forma más rápida y sencilla.
LESS está diseñado en JavaScript y también creado para usarse en vivo , que se compila más rápido que otros preprocesadores CSS.
LESS mantiene su código de forma modular, lo cual es realmente importante al hacerlo legible y fácilmente modificable.
Se puede lograr un mantenimiento más rápido mediante el uso de MENOS variables .
Historia
LESS fue diseñado por Alexis Sellieren 2009. LESS es un código abierto. La primera versión de LESS fue escrita en Ruby; en las versiones posteriores, el uso de Ruby fue reemplazado por JavaScript.
Caracteristicas
Se puede escribir un código más limpio y legible de forma organizada.
Podemos definir estilos y se puede reutilizar en todo el código.
LESS está basado en JavaScript y es un superconjunto de CSS.
LESS es una herramienta ágil que soluciona el problema de la redundancia de código.
Ventajas
LESS genera fácilmente CSS que funciona en todos los navegadores.
MENOS le permite escribir código mejor y mejor organizado mediante el uso de anidamiento .
El mantenimiento se puede lograr más rápidamente mediante el uso de variables .
MENOS le permite reutilizar todas las clases fácilmente al hacer referencia a ellas en sus conjuntos de reglas.
LESS proporciona el uso de operaciones que agilizan la codificación y ahorran tiempo.
Desventajas
Se necesita tiempo para aprender si es nuevo en el preprocesamiento de CSS.
Debido al estrecho acoplamiento entre los módulos, se deben realizar más esfuerzos para reutilizar y / o probar los módulos dependientes.
LESS tiene menos marco en comparación con un preprocesador más antiguo como SASS, que consta de los marcos Compass , Gravity y Susy .
En este capítulo, entenderemos, paso a paso, cómo instalar LESS.
Requisitos del sistema para MENOS
Operating System - multiplataforma
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.
Instalación de LESS
Entendamos ahora la instalación de LESS.
Step 1 - necesitamos NodeJspara ejecutar MENOS ejemplos. Para descargar NodeJs, abra el enlacehttps://nodejs.org/en/, verá una pantalla como se muestra a continuación:
Descargue la versión más reciente del archivo zip.
Step 2- Ejecute la configuración para instalar Node.js en su sistema.
Step 3- A continuación, instale LESS en el servidor a través de NPM (Node Package Manager). Ejecute el siguiente comando en el símbolo del sistema.
npm install -g less
Step 4 - Después de la instalación exitosa de LESS, verá las siguientes líneas en el símbolo del sistema -
`-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
`-- [email protected]
Ejemplo
A continuación se muestra un ejemplo simple de MENOS.
hola.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Hello!!!!!</h3>
</body>
</html>
Creemos ahora un archivo style.less que es bastante similar a CSS, la única diferencia es que se guardará con la extensión .less . Ambos archivos, .html y .less deben crearse dentro de la carpetanodejs.
estilo sin
@primarycolor: #FF7F50;
@color:#800080;
h1 {
color: @primarycolor;
}
h3 {
color: @color;
}
Compile el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Cuando ejecute el comando anterior, creará el archivo style.css automáticamente. Siempre que cambie el archivo LESS, es necesario ejecutar el comando anterior en elcmdy luego se actualizará el archivo style.css .
El archivo style.css tendrá el siguiente código cuando ejecute el comando anterior:
style.css
h1 {
color: #FF7F50;
}
h3 {
color: #800080;
}
Salida
Realicemos ahora los siguientes pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el hello.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
Es un grupo de propiedades CSS que permite usar propiedades de una clase en otra clase e incluye el nombre de la clase como sus propiedades. En LESS, puede declarar mixin de la misma manera que el estilo CSS usando el selector de clase o id. Puede almacenar varios valores y se puede reutilizar en el código siempre que sea necesario.
Ejemplo
El siguiente ejemplo demuestra el uso de reglas anidadas en el archivo LESS:
<html>
<head>
<title>Nested Rules</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "container">
<h1>First Heading</h1>
<p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<div class = "myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</div>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
.container {
h1 {
font-size: 25px;
color:#E45456;
}
p {
font-size: 25px;
color:#3C7949;
}
.myclass {
h1 {
font-size: 25px;
color:#E45456;
}
p {
font-size: 25px;
color:#3C7949;
}
}
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass p {
font-size: 25px;
color: #3C7949;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el nested_rules.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
Puede anidar las directivas, como medios y fotogramas clave, de la misma manera, de la misma forma que anida los selectores. Puede colocar la directiva en la parte superior y sus elementos relativos no se cambiarán dentro de su conjunto de reglas. Esto se conoce como proceso de burbujeo.
Ejemplo
El siguiente ejemplo demuestra el uso de las directivas anidadas y el burbujeo en el archivo LESS:
<html>
<head>
<title>Nested Directives</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Nested Directives</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
.myclass {
@media screen {
color: blue;
@media (min-width: 1024px) {
color: green;
}
}
@media mytext {
color: black;
}
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
@media screen {
.myclass {
color: blue;
}
}
@media screen and (min-width: 1024px) {
.myclass {
color: green;
}
}
@media mytext {
.myclass {
color: black;
}
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el nested_directives_bubbling.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
LESS proporciona soporte para algunas operaciones aritméticas como más (+), menos (-), multiplicación (*) y división (/) y pueden operar con cualquier número, color o variable. Las operaciones ahorran mucho tiempo cuando utiliza variables y tiene ganas de trabajar en matemáticas simples.
Ejemplo
El siguiente ejemplo demuestra el uso de operaciones en el archivo LESS:
<html>
<head>
<title>Less Operations</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Operations</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.myclass {
font-size: 20px;
color: green;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el operations.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
Construye selectores dinámicamente y usa la propiedad o el valor de la variable como una cadena arbitraria.
Ejemplo
El siguiente ejemplo demuestra el uso de escape en el archivo LESS:
<html>
<head>
<title>Less Escaping</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Escaping</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
Ahora cree el archivo style.less .
estilo sin
p {
color: ~"green";
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior, creará el archivo style.css automáticamente con el siguiente código:
style.css
p {
color: green;
}
Todo lo que esté escrito dentro de ~ "some_text" se mostrará como some_text después de compilar el código LESS en código CSS.
Salida
Realicemos ahora los siguientes pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el escaping.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
LESS asigna código JavaScript con manipulación de valores y utiliza funciones predefinidas para manipular aspectos de elementos HTML en la hoja de estilo. Proporciona varias funciones para manipular colores, como función redonda, función de suelo, función de techo, función de porcentaje, etc.
Ejemplo
El siguiente ejemplo demuestra el uso de funciones en el archivo LESS:
<html>
<head>
<title>Less Functions</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Functions</h1>
<p class = "mycolor">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Ahora cree el archivo style.less .
estilo sin
@color: #FF8000;
@width:1.0;
.mycolor {
color: @color;
width: percentage(@width);
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ahora ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.mycolor {
color: #FF8000;
width: 100%;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el functions.html archivo.
Abra este archivo HTML en un navegador, aparecerá el siguiente resultado.
Descripción
Los espacios de nombres se utilizan para agrupar los mixins bajo un nombre común. Usando espacios de nombres, puede evitar conflictos en el nombre y encapsular un grupo de mixins del exterior.
Ejemplo
El siguiente ejemplo demuestra el uso de espacios de nombres y descriptores de acceso en el archivo LESS:
<html>
<head>
<title>Less Namespaces and Accessors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Namespaces and Accessors</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Ahora cree el archivo style.less .
estilo sin
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
.myclass {
.class1 > .class2 > .val(20px);
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.myclass {
font-size: 20px;
color: green;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el namespaces_accessors.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
El alcance de la variable especifica el lugar de la variable disponible. Las variables se buscarán desde el ámbito local y, si no están disponibles, el compilador buscará desde el ámbito principal.
Ejemplo
El siguiente ejemplo demuestra el uso de espacios de nombres y descriptores de acceso en el archivo LESS:
<html>
<head>
<title>Less Scope</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Scope</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Ahora cree el archivo style.less .
estilo sin
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.myclass {
font-size: 20px;
color: green;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el scope.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
Los comentarios hacen que el código sea claro y comprensible para los usuarios. Puede usar tanto el estilo de bloque como los comentarios en línea en el código, pero cuando compila el código LESS, los comentarios de una sola línea no aparecerán en el archivo CSS.
Ejemplo
El siguiente ejemplo demuestra el uso de comentarios en el archivo LESS:
<html>
<head>
<title>Less Comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Comments</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
</body>
</html>
Ahora cree el archivo style.less .
estilo sin
/* It displays the
green color! */
.myclass {
color: green;
}
// It displays the blue color
.myclass1 {
color: red;
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ahora ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
/* It displays the
green color! */
.myclass {
color: green;
}
.myclass1 {
color: red;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el comments.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
Se utiliza para importar el contenido de los archivos LESS o CSS.
Ejemplo
El siguiente ejemplo demuestra el uso de la importación en el archivo LESS:
<html>
<head>
<title>Less Importing</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Importing</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
<p class = "myclass2">LESS supports creating cleaner,
cross-browser friendly CSS faster and easier.</p>
</body>
</html>
Ahora cree el archivo myfile.less .
myfile.less
.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
Ahora cree el archivo style.less .
estilo sin
@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
color: #FF0000;
}
El archivo myfile.less que se importará a style.less desde la rutahttps://www.tutorialspoint.com/less/myfile.less
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
.myclass2 {
color: #FF0000;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el importing.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
En este capítulo, discutiremos las variables en MENOS. MENOS permite definir variables con un símbolo @. La asignación de variable se realiza con uncolon(:).
La siguiente tabla demuestra el uso de LESS variables en detalle.
No Señor. | Uso y descripción de variables |
---|---|
1 | Visión general La repetición del mismo valor muchas veces se puede evitar mediante el uso de variables . |
2 | Interpolación variable Las variables también se pueden usar en otros lugares como nombres de selectores , nombres de propiedades , URL y declaraciones @import . |
3 | Nombres de variables Podemos definir variables con un nombre de variable que consta de un valor. |
4 | Carga lenta En la carga diferida, las variables se pueden utilizar incluso cuando no lo son. |
5 | Variables predeterminadas La variable predeterminada tiene la capacidad de establecer una variable solo cuando aún no está establecida. Esta función no es necesaria porque las variables se pueden anular fácilmente definiéndolas posteriormente. |
Extend es una pseudoclase MENOS que extiende otros estilos de selector en un selector usando :extend selector.
Ejemplo
El siguiente ejemplo demuestra el uso de extender en el archivo LESS:
extend_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<p>Hello!!!!!</p>
</div>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
Puede compilar el extend.less archivo a extend.css utilizando el comando siguiente -
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
h2 {
font-style: italic;
}
.style,
h2 {
background: blue;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el extend_syntax.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Ampliar sintaxis
Extender se coloca en un conjunto de reglas o se adjunta a un selector. Es similar a una pseudoclase que contiene una o más clases, que están separadas por comas. Usando la palabra clave opcionalall, se puede seguir cada selector.
Ejemplo
El siguiente ejemplo demuestra el uso de la sintaxis de extensión en el archivo LESS:
extend_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<div class = "container">
<p>Hello!!!!!</p>
</div>
</div>
</body>
</html>
Ahora cree el archivo style.less .
estilo sin
.style:extend(.container, .img) {
background: #BF70A5;
}
.container {
font-style: italic;
}
.img {
font-size: 30px;
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el extend_syntax.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
La siguiente tabla enumera todos los tipos de sintaxis de extensión que puede usar en LESS -
No Señor. | Tipos y descripción |
---|---|
1 | Extender adjunto al selector Extend está conectado a un selector que se parece a una pseudoclase con selector como parámetro. |
2 | Extender el conjunto de reglas internas los &:extend(selector) la sintaxis se puede colocar dentro del cuerpo del conjunto de reglas. |
3 | Ampliación de selectores anidados Los selectores anidados se combinan mediante el selector de extensión . |
4 | Coincidencia exacta con Extend Por defecto, extend busca la coincidencia exacta entre los selectores. |
5 | enésima expresión La forma de la enésima expresión es importante en la extensión; de lo contrario, trata al selector como diferente. |
6 | Ampliar "todo" Cuando la palabra clave todo se identifica por fin en elextend argumento luego MENOS coincide con ese selector como parte de otro selector. |
7 | Interpolación del selector con extender los extend se puede conectar al selector interpolado. |
8 | Alcance / Extender dentro de @media Extend coincide con el selector solo que está presente dentro de la misma declaración de medios. |
9 | Detección de duplicaciones No puede detectar la duplicación de selectores. |
A continuación se muestran los tipos de casos de uso para Extend
No Señor. | Tipos y descripción |
---|---|
1 | Caso de uso clásico El caso de uso clásico se usa para evitar agregar la clase base en MENOS. |
2 | Reducir el tamaño de CSS Extender se usa para mover el selector hasta las propiedades que desea usar; esto ayuda a reducir el código generado por CSS. |
3 | Combinando estilos / una mezcla más avanzada Usando extender podemos combinar los mismos estilos de un selector particular en otro selector. |
Los mixins son similares a las funciones de los lenguajes de programación. Los mixins son un grupo de propiedades CSS que le permiten usar propiedades de una clase para otra clase e incluyen el nombre de la clase como sus propiedades. En LESS, puede declarar un mixin de la misma manera que el estilo CSS usando el selector de clase o id. Puede almacenar varios valores y se puede reutilizar en el código siempre que sea necesario.
La siguiente tabla muestra el uso de LESS mixins en detalle.
No Señor. | Uso y descripción de Mixins |
---|---|
1 | No emitir el Mixin Se puede hacer que los mixins desaparezcan en la salida simplemente colocando los paréntesis después. |
2 | Selectores en Mixins Los mixins pueden contener no solo propiedades, sino que también pueden contener selectores. |
3 | Espacios de nombres Los espacios de nombres se utilizan para agrupar los mixins bajo un nombre común. |
4 | Espacios de nombres protegidos Cuando se aplica la protección al espacio de nombres, los mixins definidos por él se utilizan solo cuando la condición de protección devuelve verdadera. |
5 | La! Importante palabra clave La palabra clave ! Important se utiliza para anular la propiedad particular. |
Ejemplo
El siguiente ejemplo demuestra el uso de mixins en el archivo LESS:
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>LESS Mixins</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p class = "p1">LESS is a CSS pre-processor that enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<p class = "p3">LESS is cross browser friendly.</p>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
.p1 {
color:red;
}
.p2 {
background : #64d9c0;
.p1();
}
.p3 {
background : #LESS520;
.p1;
}
Puede compilar style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.p1 {
color: red;
}
.p2 {
background: #64d9c0;
color: red;
}
.p3 {
background: #LESS520;
color: red;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el less_mixins.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Los paréntesis son opcionales al llamar a mixins. En el ejemplo anterior, ambas declaraciones.p1(); y .p1; hacer la misma cosa.
Descripción
Los mixins paramétricos utilizan uno o más parámetros que amplían la funcionalidad de LESS tomando argumentos y sus propiedades para personalizar la salida del mixin cuando se mezclan en otro bloque.
Por ejemplo, considere un simple fragmento de código MENOS:
.border(@width; @style; @color) {
border: @width @style @color;
}
.myheader {
.border(2px; dashed; green);
}
Aquí estamos usando el mixin paramétrico como .border con tres parámetros: ancho, estilo y color. Con estos parámetros, puede personalizar la salida de mezcla con el valor de los parámetros pasados.
La siguiente tabla describe los diferentes tipos de mixins paramétricos junto con la descripción.
No Señor. | Tipos y descripción |
---|---|
1 | Mixins con múltiples parámetros Los parámetros se pueden separar mediante comas o punto y coma. |
2 | Parámetros nombrados Los mixins proporcionan valores de parámetros en lugar de posiciones utilizando sus nombres. |
3 | @argumentos Variable Cuando se llama a un mixin, los @argumentos incluyen todos los argumentos pasados. |
4 | Argumentos avanzados y la variable @rest Mixin toma un número variable de argumentos usando ..... |
5 | La coincidencia de patrones Cambie el comportamiento de mixin pasándole parámetros. |
En este capítulo, entenderemos la importancia de Mixins as Functions. Al igual que las funciones, los mixins se pueden anidar, aceptar parámetros y devolver valores también.
La siguiente tabla muestra el uso de mixins como funciones en detalle.
No Señor. | Uso y descripción de Mixins |
---|---|
1 | Alcance Mixin Los mixins consisten en variables; estos se pueden utilizar en el alcance de la persona que llama y son visibles. |
2 | Valores de mezcla y retorno Los mixins son similares a las funciones y las variables que se definen en un mixin se comportarán como valores de retorno. |
3 | Mixin dentro de otro mixin Siempre que un mixin se define dentro de otro mixin, también se puede utilizar como valor de retorno. |
Descripción
El conjunto de reglas separado contiene conjuntos de reglas como propiedades, conjuntos de reglas anidados, declaración de variables, mixins, etc. Se almacena en una variable y se incluye en otra estructura; todas las propiedades del conjunto de reglas se copian en esa estructura.
Ejemplo
El siguiente ejemplo muestra cómo pasar un conjunto de reglas a mixin en el archivo LESS -
pass_ruleset.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web.</p>
</div>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
@detached-ruleset: {
.mixin() {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
};
.cont {
@detached-ruleset();
.mixin();
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el passing_ruleset.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Alcance
Todas las variables y mixins en un conjunto de reglas separado están disponibles dondequiera que se llame o defina el conjunto de reglas. De lo contrario, tanto el alcance del llamador como el de definición están disponibles de forma predeterminada. El alcance de la declaración tiene prioridad cuando ambos alcances contienen el mismo mixin o variable. El cuerpo del conjunto de reglas separado se define en el ámbito de la declaración. No cambia su alcance después de que el conjunto de reglas separado se copia de una variable a otra.
La siguiente tabla enumera todos los tipos de alcance:
No Señor. | Tipos y descripción |
---|---|
1 | Definición y visibilidad del alcance de la persona que llama Las variables y los mixins se definen dentro del conjunto de reglas separado. |
2 | La referencia no modificará el alcance del conjunto de reglas separado Con solo dar las referencias, el conjunto de reglas no accede a ningún ámbito nuevo. |
3 | El desbloqueo modificará el alcance del conjunto de reglas separado El conjunto de reglas separado puede acceder al ámbito importándolo. |
Descripción
los @importLa directiva se usa para importar los archivos en el código. Difunde el código LESS en diferentes archivos y permite mantener la estructura del código fácilmente. Puede colocar las declaraciones @import en cualquier lugar del código.
Por ejemplo, puede importar el archivo usando @importpalabra clave como @import "file_name.less" .
Extensiones de archivo
Puede usar las declaraciones @import dependiendo de las diferentes extensiones de archivo, como:
Si está utilizando la extensión .css , entonces se considerará como CSS y la declaración @import permanecerá como está.
Si contiene alguna otra extensión, se considerará MENOS y se importará.
Si no hay una extensión LESS, se agregará e incluirá como archivo LESS importado.
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
Ejemplo
El siguiente ejemplo demuestra el uso de la variable en el archivo SCSS:
<!doctype html>
<head>
<title>Import Directives</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Import Directives</h2>
<p class = "myline">Welcome to Tutorialspoint...</p>
</body>
</html>
A continuación, cree el archivo import_dir.less .
import_dir.less
.myline {
font-size: 20px;
}
Ahora, cree el archivo style.less .
estilo sin
@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
color:#FF0000;
}
El archivo import_dir.less se importará al archivo style.less desde la rutahttps://www.tutorialspoint.com/less/import_dir.less.
Puede compilar style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.myline {
font-size: 20px;
}
.myline {
color: #FF0000;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el import_directives.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
En este capítulo, entenderemos la importancia de Import Optionsen menos. MENOS ofrece la@import declaración que permite que las hojas de estilo importen hojas de estilo LESS y CSS.
Las siguientes tablas enumeran las directivas de importación que se implementarán en las declaraciones de importación.
No Señor. | Opciones de importación y descripción |
---|---|
1 | referencia Utiliza un archivo LESS solo como referencia y no lo generará. |
2 | en línea Le permite copiar su CSS en la salida sin ser procesado. |
3 | Menos Tratará el archivo importado como el archivo LESS normal, independientemente de la extensión del archivo. |
4 | css Tratará el archivo importado como el archivo CSS normal, independientemente de la extensión del archivo. |
5 | una vez Importará el archivo solo una vez. |
6 | múltiple Importará el archivo varias veces. |
7 | Opcional Continúa compilando aunque no se encuentre el archivo a importar. |
Se permite utilizar más de una palabra clave en la @import declaración, sin embargo, debe usar comas para separar las palabras clave.
Por ejemplo
@import (less, optional) "custom.css";
Descripción
Si desea hacer coincidir valores simples o un número de argumentos en expresiones, puede hacer uso de guardias. Está asociado con la declaración de mixin e incluye la condición que se adjunta a un mixin. Cada mixin tendrá uno o más guardias separados por comas; debe incluirse un guardia entre paréntesis. MENOS usa mixins protegidos en lugar deif/else declaraciones y realiza cálculos para especificar la combinación combinada.
La siguiente tabla describe los diferentes tipos de protectores mixins junto con una descripción.
No Señor. | Tipos y descripción |
---|---|
1 | Operadores de comparación de guardias Puede utilizar el operador de comparación (=) para comparar números, cadenas, identificadores, etc. |
2 | Operadores lógicos de guardia Puede utilizar la palabra clave y para trabajar con operadores lógicos con guardias. |
3 | Funciones de verificación de tipo Contiene las funciones integradas para determinar los tipos de valor para los mixins coincidentes. |
4 | Mixins condicionales MENOS utiliza la función predeterminada para combinar la mezcla con otras combinaciones de mezcla. |
Ejemplo
El siguiente ejemplo demuestra el uso de protectores mixin en el archivo LESS -
<!doctype html>
<head>
<title>Mixin Guards</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Mixin Guards</h2>
<p class = "class1">Hello World...</p>
<p class = "class2">Welcome to Tutorialspoint...</p>
</body>
</html>
Ahora, cree el archivo style.less .
estilo sin
.mixin (@a) when (lightness(@a) >= 50%) {
font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
font-size: 16px;
}
.mixin (@a) {
color: @a;
}
.class1 {
.mixin(#FF0000)
}
.class2 {
.mixin(#555)
}
Puede compilar style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.class1 {
font-size: 14px;
color: #FF0000;
}
.class2 {
font-size: 16px;
color: #555;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el mixin-guard.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
Los protectores se utilizan para hacer coincidir valores simples o varios argumentos en expresiones. Se aplica a los selectores de CSS. Es una sintaxis para declarar mixin y llamarlo inmediatamente. Para sacar con éxito elifdeclaración de tipo; únete a esto con la función&, lo que le permite agrupar varios guardias.
Ejemplo
El siguiente ejemplo demuestra el uso de css guard en el archivo LESS -
css_guard.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div class = "style">
<h3>The largest Tutorials Library on the web.</h3>
</div>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
@usedScope: global;
.mixin() {
@usedScope: mixin;
.cont when (@usedScope = global) {
background-color: red;
color: black;
}
.style when (@usedScope = mixin) {
background-color: blue;
color: white;
}
@usedScope: mixin;
}
.mixin();
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
.style {
background-color: blue;
color: white;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el css_guard.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
En este capítulo, entenderemos cómo funcionan los bucles en LESS. La declaración de bucles nos permite ejecutar una declaración o grupo de declaraciones varias veces. Se pueden crear varias estructuras iterativas / de bucle cuando la mezcla recursiva se combina conGuard Expressions y Pattern Matching.
Ejemplo
El siguiente ejemplo demuestra el uso de bucles en el archivo LESS:
loop_example.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web. </p>
</div>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el loop_example.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
Descripción
Esta característica en LESS permite la adición de valores a una lista separada por comas o espacios de múltiples propiedades usando una sola propiedad. Se puede utilizar para propiedades de fondo y transformación.
La siguiente tabla describe los dos tipos de funciones compatibles con la función Fusionar.
No Señor. | Tipos y descripción |
---|---|
1 | Coma Agrega valor de propiedad al final. |
2 | Espacio Agrega valor de propiedad con espacio. |
En este capítulo, entendamos cómo Parent Selectorstrabajo. Es posible hacer referencia al selector principal utilizando el&(y comercial) operador. Los selectores principales de una regla anidada están representados por& operador y se utiliza al aplicar una clase de modificación o pseudoclase a un selector existente.
La siguiente tabla muestra los tipos de selector principal:
No Señor. | Tipos y descripción |
---|---|
1 | Múltiples y los & representará el selector más cercano y también todos los selectores padres. |
2 | Cambiar el orden del selector Anteponer un selector a los selectores heredados (padres) es útil cuando se cambia el orden del selector. |
3 | Combinatorial Explosion los & también puede producir todas las posibles permutación de selectores en una lista separada por comas. |
Ejemplo
El siguiente ejemplo demuestra el uso del selector principal en el archivo LESS:
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>Parent Selector</title>
</head>
<body>
<h2>Welcome to TutorialsPoint</h2>
<ul>
<li><a>SASS</a></li>
<li><a>LESS</a></li>
</ul>
</body>
</html>
A continuación, cree el archivo style.less .
estilo sin
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
Puede compilar el archivo style.less en style.css usando el siguiente comando:
lessc style.less style.css
Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:
style.css
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
En el ejemplo anterior, & se refiere al selector a.
Salida
Siga estos pasos para ver cómo funciona el código anterior:
Guarde el código html anterior en el parent_selector1.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.
El operador de selectores principales tiene muchos usos, como cuando necesita combinar los selectores de la regla anidada de una manera diferente a la predeterminada. Otro uso típico de&es generar nombres de clases repetidamente. Para más información haga clic aquí .
Las funciones misceláneas consisten en un grupo de funciones de diferente tipo.
La siguiente tabla enumera todos los tipos de funciones misceláneas:
No Señor. | Funciones y descripción |
---|---|
1 | color Es una cadena que representa colores. |
2 | tamaño de la imagen Se utiliza para examinar la dimensión de la imagen del archivo. |
3 | ancho de la imagen Examina el ancho de la imagen del archivo. |
4 | Altura de imagen Examina la altura de la imagen del archivo. |
5 | convertir Un número se convierte de una unidad a otra. |
6 | datos - uri La uri de datos es un esquema de identificador de recursos uniforme (URI) que obtiene un recurso en línea en las páginas web. |
7 | defecto La función predeterminada devuelve verdadero solo cuando está disponible dentro de la condición de guardia y no coincide con ningún otro mixin. |
8 | unidad La función predeterminada devuelve verdadero solo cuando está disponible dentro de la condición de guardia y no coincide con ningún otro mixin |
9 | conseguir unidad La función get - unit devuelve su unidad donde el argumento está presente con número y unidades. |
10 | svg - degradado svg-gradient es una transición de un color a otro. Puede agregar muchos colores al mismo elemento. |
Descripción
Less admite algunas de las funciones de cadena que se enumeran a continuación:
- escape
- e
- % formato
- replace
La siguiente tabla describe las funciones de cadena anteriores junto con la descripción.
No Señor. | Tipos y descripción | Ejemplo |
---|---|---|
1 | Escape Codifica una cadena o información mediante la codificación de URL en caracteres especiales. No se pudieron codificar algunos caracteres como, , / , ? , @ , & , + , ~ , ! , $ , ' y algunos caracteres que puede codificar, como \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ y =. |
Genera una cadena de escape como - |
2 | e Es una función de cadena que usa una cadena como parámetro y devuelve la información sin comillas. Es un escape CSS que usa ~ "algunos contenidos" valores y números de escape como parámetros. |
Genera una cadena de escape como - |
3 | % format Esta función formatea una cadena. Se puede escribir con el siguiente formato: |
Emite la cadena formateada como - |
4 | replace Se utiliza para reemplazar el texto dentro de una cadena. Utiliza algunos parámetros:
|
Reemplaza la cadena como - |
Descripción
MENOS consta de funciones de lista que se utilizan para especificar la longitud de la lista y la posición del valor en la lista.
La siguiente tabla enumera las funciones de lista utilizadas en MENOS -
No Señor. | Función descriptiva |
---|---|
1 | Longitud Tomará una lista de valores separados por comas o espacios como parámetro. |
2 | Extraer Devolverá el valor en una posición especificada en una lista. |
Descripción
Las funciones matemáticas incluyen métodos que se utilizan para realizar operaciones numéricas como redondeo, raíz cuadrada, valor de potencia, módulo, porcentaje, etc.
La siguiente tabla muestra las funciones matemáticas utilizadas en MENOS -
No Señor. | Función descriptiva | Ejemplo |
---|---|---|
1 | ceil Redondea el número al siguiente entero más alto. |
Redondea el número a - |
2 | floor Redondea el número al siguiente entero más bajo. |
Redondea el número a - |
3 | percentage Transforma el número de coma flotante en una cadena de porcentaje. |
convierte el número en cadena de porcentaje como - |
4 | round Redondea un número de coma flotante. |
convierte el número al valor de redondeo como - |
5 | sqrt Devuelve la raíz cuadrada de un número. |
define la raíz cuadrada de un número como - |
6 | abs Proporciona el valor absoluto de un número. |
muestra el valor absoluto como - |
7 | sin Devuelve radianes en números. |
calcula el valor del seno como - |
8 | asin Especifica arcoseno (inverso del seno) de un número que devuelve un valor entre -pi / 2 y pi / 2. |
calcula el valor de asin como - |
9 | cos Devuelve el coseno del valor especificado y determina radianes en números sin unidades. |
calcula el valor del cos como - |
10 | acos Especifica el arcocoseno (inverso del coseno) de un número que devuelve un valor entre 0 y pi. |
calcula el valor acos como - |
11 | tan Especifica la tangente del número. |
calcula el valor de bronceado como - |
12 | atan Especifica arcotangente (inverso de la tangente) de un número especificado. |
muestra un valor atan como - |
13 | pi Devuelve el valor pi. |
determina el valor pi como - |
14 | pow Especifica el valor del primer argumento elevado a la potencia del segundo argumento. |
especifica el valor de potencia como - |
15 | mod Devuelve el módulo del primer argumento con respecto al segundo argumento. También maneja números de coma flotante y negativos. |
devuelve el valor del módulo como - |
dieciséis | min Especifica el valor más pequeño de uno o más argumentos. |
devuelve el valor mínimo como - |
17 | max Especifica el valor más alto de uno o más argumentos. |
devuelve el valor máximo como - |
En este capítulo, entenderemos la importancia de Type Functionsen menos. Se utilizan para determinar el tipo de valor.
La siguiente tabla muestra las funciones de tipo utilizadas en LESS.
No Señor. | Tipo Funciones y descripción | Ejemplo |
---|---|---|
1 | isnumber Toma un valor como parámetro y devuelve verdadero , si es un número o falso en caso contrario. |
|
2 | isstring Toma un valor como parámetro y devuelve verdadero , si es una cadena o falso en caso contrario. |
|
3 | iscolor Toma un valor como parámetro y devuelve verdadero , si el valor es un color o falso si no lo es. |
|
4 | iskeyword Toma un valor como parámetro y devuelve verdadero , si el valor es una palabra clave o falso si no lo es. |
|
5 | isurl Toma un valor como parámetro y devuelve verdadero , si el valor es una URL o falso si no lo es. |
|
6 | ispixel Toma un valor como parámetro y devuelve verdadero , si el valor es un número en píxeles o falso en caso contrario. |
|
7 | isem Toma un valor como parámetro y devuelve verdadero , si el valor es un valor em o falso si no lo es. |
|
8 | ispercentage Toma un valor como parámetro y devuelve verdadero , si el valor está en porcentaje o devuelve falso , si el valor no está en porcentaje. |
|
9 | isunit Devuelve verdadero si un valor es un número en unidades especificadas proporcionado como parámetro o devolverá falso si el valor no es un número en unidades especificadas. |
|
10 | isruleset Toma un valor como parámetro y devuelve verdadero , si el valor es un conjunto de reglas o falso en caso contrario. |
|
Descripción
MENOS proporciona una serie de funciones de color útiles para alterar y manipular los colores de diferentes maneras. LESS admite algunas de las funciones de definición de color que se muestran en la siguiente tabla:
No Señor. | Función descriptiva | Ejemplo |
---|---|---|
1 | rgb Crea color a partir de valores de rojo, verde y azul. Tiene los siguientes parámetros:
|
convierte el color con valores rgb como - |
2 | rgba Determina el color a partir de los valores rojo, verde, azul y alfa. Tiene los siguientes parámetros:
|
convierte el objeto de color con valores rgba como - |
3 | argb Define la representación hexadecimal del color en #AARRGGBBformato. Utiliza el siguiente parámetro:
|
devuelve el color argb como - |
4 | hsl Genera el color a partir de valores de tono, saturación y luminosidad. Tiene los siguientes parámetros:
|
devuelve el objeto de color usando valores HSL como - |
5 | hsla Genera el color a partir de matiz, saturación, luminosidad y valores alfa. Tiene los siguientes parámetros:
|
especifica el objeto de color usando valores HSLA como - |
6 | hsv Produce el color a partir de los valores de matiz, saturación y valor. Contiene los siguientes parámetros:
|
convierte el objeto de color con valores hsv como - |
7 | hsva Produce el color a partir de matiz, saturación, valor y valores alfa. Utiliza los siguientes parámetros:
|
especifica el objeto de color con valores hsva como - |
En este capítulo, entenderemos la importancia de las funciones de canal de color en LESS. LESS admite pocas funciones integradas que establecen el valor de un canal. El canal establece el valor según la definición del color. Los colores HSL tienen un canal de tono, saturación y luminosidad y el color RGB tiene un canal rojo, verde y azul. La siguiente tabla enumera todas las funciones del canal de color:
No Señor. | Función descriptiva | Ejemplo |
---|---|---|
1 | hue En el espacio de color HSL, el canal de tono se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
2 | saturation En el espacio de color HSL, el canal de saturación se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
3 | lightness En el espacio de color HSL, el canal de luminosidad se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
4 | hsvhue En el espacio de color HSV, el canal de tono se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
5 | hsvsaturation En el espacio de color HSL, el canal de saturación se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
6 | hsvvalue En el espacio de color HSL, el canal de valor se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
7 | red El canal rojo se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
8 | green El canal verde se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
9 | blue El canal azul se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
10 | alpha El canal alfa se extrae del objeto de color. |
Se compila en CSS como se muestra a continuación: |
11 | luma El valor de luminancia se calcula a partir de un objeto de color. |
Se compila en CSS como se muestra a continuación: |
12 | luminance El valor de luma se calcula sin corrección de gamma. |
Se compila en CSS como se muestra a continuación: |
Descripción
LESS proporciona una serie de funciones operativas útiles para alterar y manipular colores de diferentes formas y tomar parámetros en las mismas unidades. LESS admite algunas de las funciones de operación del color como se muestra en la siguiente tabla:
No Señor. | Directivas y descripción |
---|---|
1 | saturar Varía la intensidad o saturación de un color en el elemento. |
2 | desaturar Disminuye la intensidad o saturación de un color en el elemento. |
3 | aligerar Aumenta la claridad de un color en el elemento. |
4 | oscurecer Varía la intensidad o saturación de un color en el elemento. |
5 | fundirse Aumenta la opacidad de los elementos seleccionados. |
6 | desvanecerse Disminuye la opacidad de los elementos seleccionados. |
7 | desvanecerse Se utiliza para establecer la transparencia de un color para elementos seleccionados. |
8 | girar Se utiliza para rotar el ángulo de un color para elementos seleccionados. |
9 | mezcla Mezcla los dos colores junto con la opacidad. |
10 | tinte Mezcla el color con el blanco a medida que disminuye la proporción del color. |
11 | sombra Mezcla el color con el negro a medida que disminuye la proporción del color. |
12 | escala de grises Descarta la saturación de un color en los elementos seleccionados. |
13 | contraste Establece el contraste de los colores en el elemento. |
En este capítulo, entenderemos el Color Blending Functionsen menos. Estas son operaciones similares que se utilizan en editores de imágenes como Photoshop, Fireworks o GIMP, que hacen coincidir sus colores CSS con sus imágenes.
La siguiente tabla muestra las funciones de combinación de colores utilizadas en MENOS.
No Señor. | Funciones y descripción |
---|---|
1 | multiplicar Multiplica dos colores y devuelve un color resultante. |
2 | pantalla Toma dos colores y devuelve un color más brillante. Funciona de manera opuesta a la función de multiplicar . |
3 | cubrir Genera resultado combinando el efecto de multiplicar y pantalla . |
4 | luz tenue Funciona de manera similar a la superposición, pero usa solo una parte del color, lo que resalta suavemente el otro color. |
5 | luz dura Funciona de manera similar a la superposición, pero el papel de los colores se invierte. |
6 | diferencia Resta el segundo color de entrada del primer color de entrada. |
7 | exclusión Funciona de manera similar a la función de diferencia pero con menor contraste. |
8 | promedio Calcula el promedio de dos colores de entrada por canal (RGB). |
9 | negación Funciona de manera opuesta a la función de diferencia , que resta el primer color del segundo color. |
Usando la línea de comandos, podemos compilar el .less archivo de .css .
Instalación de lessc para su uso global
El siguiente comando se usa para instalar lessc con npm (administrador de paquetes de nodos) para que lessc esté disponible globalmente.
npm install less -g
También puede agregar una versión específica después del nombre del paquete. Por ejemplonpm install [email protected] -g
Instalación para el desarrollo de nodos
El siguiente comando se usa para instalar la última versión de lessc en la carpeta de su proyecto.
npm i less -save-dev
También se agrega a devDependencies en su proyecto package.json.
Lanzamientos beta de lessc
Se etiqueta como beta cuando el lessc la estructura se publica para npmAquí, la nueva funcionalidad se desarrolla periódicamente. less -v se usa para obtener la versión actual.
Instalación de una versión de desarrollo no publicada de lessc
Se debe especificar el compromiso, cuando procedemos a instalar una versión no publicada de lessc y se deben seguir las instrucciones para identificar una URL de git como una dependencia. Esto asegurará que esté utilizando la versión correcta de leesc para su proyecto.
Uso del lado del servidor y de la línea de comandos
bin/lesscincluye binario en el repositorio. Funciona con Windows, OS X y nodejs en * nix.
Uso de la línea de comandos
La entrada se lee desde stdin cuando la fuente se establece en un guión o un guión (-).
lessc [option option = parameter ...]
Por ejemplo, podemos compilar .less a .css usando el siguiente comando -
lessc stylesheet.less stylesheet.css
Podemos compilar .less a .css por y minimice el resultado usando el siguiente comando.
lessc -x stylesheet.less stylesheet.css
Opciones
La siguiente tabla enumera las opciones utilizadas en el uso de la línea de comandos:
No Señor. | Opciones y descripción | Mando |
---|---|---|
1 | Help Aparece un mensaje de ayuda con las opciones disponibles. |
|
2 | Include Paths Incluye las rutas disponibles a la biblioteca. Se puede hacer referencia a estas rutas de forma simple y relativa en los archivos Less. Las rutas de las ventanas están separadas por dos puntos (:) o punto y coma (;). |
|
3 | Makefile Genera una lista de dependencias de importación de archivos MAKE a stdout como salida. |
|
4 | No Color Desactiva la salida coloreada. |
|
5 | No IE Compatibility Desactiva las comprobaciones de compatibilidad de IE. |
|
6 | Disable Javascript Deshabilita el javascript en menos archivos. |
|
7 | Lint Comprueba la sintaxis e informa de errores sin ningún resultado. |
|
8 | Silent Detiene a la fuerza la visualización de mensajes de error. |
|
9 | Strict Imports Fuerza evalúa importaciones. |
|
10 | Allow Imports from Insecure HTTPS Hosts Importa desde los hosts HTTPS inseguros. |
|
11 | Version Muestra el número de versión y sale. |
|
12 | Compress Ayuda a eliminar los espacios en blanco y comprimir la salida. |
|
13 | Source Map Output Filename Genera el mapa fuente en menos. Si la opción de mapa de origen se define sin nombre de archivo, utilizará el mapa de extensión con el nombre de archivo Less como origen. |
|
14 | Source Map Rootpath Se especifica la ruta raíz y se debe agregar a las rutas de archivo Less dentro del mapa de origen y también al archivo de mapa que se especifica en su css de salida. |
|
15 | Source Map Basepath Se especifica una ruta que debe eliminarse de las rutas de salida. La ruta base es opuesta a la opción ruta raíz. |
|
dieciséis | Source Map Less Inline Todos los archivos Less deben incluirse en el mapa fuente. |
|
17 | Source Map Map Inline Especifica que en el css de salida el archivo de mapa debe estar en línea. |
|
18 | Source Map URL Se permite que una URL anule los puntos en el archivo de mapa en el CSS. |
|
19 | Rootpath Establece rutas para la reescritura de URL en importaciones y URL relativas. |
|
20 | Relative URLs En los archivos importados, la URL se reescribe para que la URL sea siempre relativa al archivo base. |
|
21 | Strict Math Procesa todas las funciones matemáticas en su css. De forma predeterminada, está desactivado. |
|
22 | Strict Units Permite unidades mixtas. |
|
23 | Global Variable Se define una variable a la que puede hacer referencia el archivo. |
|
24 | Modify Variable Esto es diferente a la opción de variable global; mueve la declaración al final de su archivo less. |
|
25 | URL Arguments Para pasar a cada URL, se permite especificar un argumento. |
|
26 | Line Numbers Se genera un mapeo de origen en línea. |
|
27 | Plugin Carga el complemento. |
|
Less se usa en el navegador cuando desea compilar el archivo Less de forma dinámica cuando sea necesario y no en el lado del servidor; esto se debe a que less es un archivo grande de JavaScript.
Para empezar, debemos agregar el script LESS para usar LESS en el navegador:
<script src = "less.js"></script>
Para encontrar las etiquetas de estilo en la página, debemos agregar la siguiente línea en la página. También crea las etiquetas de estilo con el CSS compilado.
<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>
Opciones de configuración
Antes de la etiqueta de secuencia de comandos, las opciones se pueden establecer en el objeto menos mediante programación. Afectará todo el uso programático de less y las etiquetas de enlace iniciales.
Por ejemplo, podemos configurar la opción de la siguiente manera:
<script>
less = {
env: "development"
};
</script>
<script src = "less.js"></script>
También podemos configurar la opción en otro formato en la etiqueta del script como se especifica a continuación:
<script>
less = {
env: "development"
};
</script>
<script src = "less.js" data-env = "development"></script>
También puede agregar estas opciones a las etiquetas de enlace.
<link data-dump-line-numbers = "all"
data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }'
rel = "stylesheet/less" type = "text/css" href = "less/style.less">
Los puntos que deben tenerse en cuenta para las opciones de atributos son:
window.less <etiqueta de script <etiqueta de enlace son el nivel de importancia.
Los atributos de datos no se pueden escribir en caso de camello; la opción de etiqueta de enlace se representa como opciones de tiempo.
Los atributos de datos con valores que no sean cadenas deben ser válidos para JSON.
Modo reloj
El modo de vigilancia se puede habilitar configurando la opción env en desarrollo y llamando a less.watch () después de agregar el archivo less.js. Si desea que el modo de reloj se habilite temporalmente, agregue #! Watch a la URL.
<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>
Modificar variables
La modificación del tiempo de ejecución de la variable LESS está habilitada. El archivo LESS se vuelve a compilar cuando se llama a un nuevo valor. El siguiente código muestra el uso básico de modificar variables:
less.modifyVars({
'@buttonFace': '#eee',
'@buttonText': '#fff'
});
Depuración
Podemos agregar la opción ! DumpLineNumbers: mediaquery a la opción url o dumpLineNumbers como se mencionó anteriormente. La opción mediaquery se puede utilizar con FireLESS (muestra el nombre de archivo LESS original y el número de línea de los estilos CSS generados por LESS).
Opciones
Antes de cargar el archivo de script less.js, las opciones deben configurarse en un objeto menos global .
<script>
less = {
env: "development",
logLevel: 2,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
globalVars: {
var1: '"string value"',
var2: 'regular value'
},
rootpath: ":/a.com/"
};
</script>
<script src = "less.js"></script>
async- Es de tipo booleano. Los archivos importados se solicitan con la opción async o no. Por defecto, es falso.
dumpLineNumbers- Es un tipo de cuerda. En el archivo css de salida, la información de la línea de origen se agrega cuando se establece dumpLineNumbers. Ayuda a depurar la regla particular de la que proviene.
env- Es un tipo de cuerda. El env puede ejecutarse en desarrollo o producción. El desarrollo se establece automáticamente cuando la URL del documento comienza confile:// o está presente en su máquina local.
errorReporting - Cuando la compilación falla, se puede configurar el método de notificación de errores.
fileAsync- Es de tipo booleano. Cuando una página está presente con un protocolo de archivo, puede solicitar si se debe importar de forma asincrónica o no.
functions - Es tipo de objeto.
logLevel- Es un tipo de número. Muestra el nivel de registro en la consola de JavaScript.
2: Información y errores
1: errores
0: nada
poll- En el modo de reloj, la hora se muestra en milisegundos entre las encuestas. Es un tipo entero; de forma predeterminada, está establecido en 1000.
relativeUrls- Las URL se ajustan para ser relativas; de forma predeterminada, esta opción se establece como falsa. Esto significa que las URL ya son relativas al archivo sin entrada. Es un tipo booleano.
globalVars- Inserta la lista de variables globales en el código. La variable de tipo de cadena debe incluirse entre comillas
modifyVars- Es diferente a la opción de variable global. Mueve la declaración al final de su archivo less.
rootpath - Establece rutas al comienzo de cada recurso de URL.
useFileCache- Usos por caché de archivos de sesión. El caché en menos archivos se usa para llamar a las variantes de modificación, donde todos los archivos menos no se recuperarán nuevamente.
LESS es compatible con todos los navegadores. Es compatible con navegadores modernos como Google Chrome, Mozilla Firefox, Safari e Internet Explorer y permite reutilizar elementos CSS y escribir MENOS código con la misma semántica. Debe tener cuidado con las implicaciones de rendimiento al usar LESS en el lado del cliente y al mostrar JavaScript para evitar problemas estéticos como
- Faltas de ortografía,
- Cambios de color,
- Texture
- Look
- Enlaces, etc.
Compile los archivos LESS en el lado del servidor para mejorar los niveles de rendimiento del sitio web.
PhantomJS no implementa la función Function.prototype.bind , por lo que debe usar el motor de JavaScript shim es5 para ejecutarlo en PhantomJS. Los usuarios pueden hacer ajustes con variables para afectar el tema y mostrarlos en tiempo real utilizando el lado del cliente MENOS en la producción.
Si desea ejecutar MENOS en navegadores más antiguos, utilice el motor de JavaScript shim es-5 que agrega funciones de JavaScript que admite MENOS. Puede utilizar atributos en el script o etiquetas de enlace mediante JSON.parse, que debe ser compatible con el navegador.
En este capítulo, entenderemos cómo se puede cargar un complemento para expandir la funcionalidad del sitio. Los complementos se pueden utilizar para facilitar su trabajo.
Línea de comando
Para instalar el complemento usando la línea de comando, primero debe instalar el complemento lessc. El complemento se puede instalar usando less-plugin al principio. La siguiente línea de comando lo ayudará a instalar el complemento clean-css:
npm install less-plugin-clean-css
Directamente, puede usar el complemento instalado usando el siguiente comando:
lessc --plugin = path_to_plugin = options
Usar un complemento en el código
En Node, se requiere el complemento y se pasa en una matriz como un complemento de opción al menos.
var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
.then(function(output) {
},
function(error) {
});
En el navegador
Antes del script less.js, el autor del complemento debe incluir el archivo javascript en la página.
<script src = "plugin.js"></script>
<script>
less = {
plugins: [plugin]
};
</script>
<script src = "less.min.js"></script>
Lista de menos complementos
La siguiente tabla enumera los complementos disponibles en MENOS.
Complementos de funciones / posprocesador
No Señor. | Complementos y descripción |
---|---|
1 | Autoprefixer Se utiliza para agregar prefijos a CSS después de la traducción de LESS. |
2 | CSScomb Ayuda a mejorar el mantenimiento de su hoja de estilo. |
3 | clean-css Minimiza la salida CSS de LESS. |
4 | CSSWring Comprime o minimiza la salida CSS de LESS. |
5 | css-flip Se utiliza para generar el CSS de izquierda a derecha (LTR) o de derecha a izquierda (RTL). |
6 | funciones Escribe la función de MENOS en el MENOS mismo. |
7 | glob Se utiliza para importar varios archivos. |
8 | consultas de medios de grupo-CSS Realiza el posprocesamiento por Less. |
9 | URL en línea Convierte automáticamente la URL en datos uri. |
10 | npm-import Importa desde el paquete npm por menos. |
11 | por favor Se utiliza para posprocesar Less. |
12 | rtl MENOS se invierte de ltr (de izquierda a derecha) a rtl (de derecha a izquierda). |
Importadores de marcos / bibliotecas
No Señor. | Importadores y descripción |
---|---|
1 | Oreja El código Bootstrap LESS se importa antes que el código LESS personalizado. |
2 | Resolución de Bower Los archivos LESS se importan de los paquetes de Bower. |
3 | CSS cardinal para less.js Antes del código LESS personalizado, se importa el código LESS para Cardinal. |
4 | Rejilla Flexbox Importador de biblioteca o Framework más comúnmente importado. |
5 | Sistema de rejilla flexible Importa el sistema de red flexible. |
6 | Iónico Importa el marco iónico. |
7 | Lesshat Importa los mixins Lesshat. |
8 | Esqueleto Importa el código sin esqueleto. |
Bibliotecas de funciones
No Señor. | Importadores y descripción |
---|---|
1 | funciones-de-color-avanzadas Se utiliza para encontrar colores más contrastantes. |
2 | cubehelix Usando el valor de corrección de gamma de 1, la función cubehelix puede devolver un color entre los dos colores. |
3 | liza Esta lista la biblioteca de funciones de manipulación. |
Para autores de complementos
MENOS permite que un autor combine con menos.
{
install: function(less, pluginManager) {
},
setOptions: function(argumentString) {
},
printUsage: function() {
},
minVersion: [2, 0, 0]
}
pluginManager proporciona un titular que puede agregar administradores de archivos, procesadores de correos o visitantes.
setOptions la función pasa la cadena.
printUsage La función se utiliza para explicar las opciones.
El punto principal del uso programático en LESS es la función less.render. Esta función utiliza el siguiente formato en MENOS -
less.render(input_data, options)
.then(function(output) {
//code here
},
function(error) {
});
la función también se puede escribir de la siguiente manera:
less.render(css, options, function(error, output) {})
Las opciones son un argumento opcional que devuelve unpromise cuando no especifica la devolución de llamada y devuelve un promisecuando especifica la devolución de llamada. Puede mostrar el archivo leyéndolo en una cadena y estableciendo los campos de nombre de archivo del archivo principal.
La opción sourceMap permite establecer opciones de sourcemap como sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles y sourceMapFileInline . El punto que debe tenerse en cuenta aquí es que la opción sourceMap no está disponible para less.js.
You can gain access to the log by adding a listener as shown in the below format −
less.logger.addListener({
debug: function(message) {
},
info: function(message) {
},
warn: function(message) {
},
error: function(message) {
}
});
The above defined functions are optional. If an error is displayed, then it will pass the error to callback or promise present in the less.render.
In this chapter, we will understand the importance of online compilers in LESS. Online compilers are used to compile the less code into css code. Online compilers tools easily help to generate the css code. Following are the available online less compilers −
winless.org/online-less-compiler
lesstester.com
dopefly.com/less-converte
lessphp.gpeasy.com/demo
leafo.net/lessphp/editor
estFiddle
Online Web IDEs/Playgrounds with Less support
Following are the available Online Web IDEs with Less support.
Sr.No. | Online Web IDEs & Description |
---|---|
1 | CSSDeck Labs This is a place where you can easily create testcases that involve HTML, CSS, JS code. |
2 | CodePen This is a playground for the frontend web. |
3 | Fiddle Salad This is a place where you can add an existing code in the environment. |
4 | JS Bin This helps Javascript and CSS code. |
5 | jsFiddle This is an online web editor. |
In this chapter, we will understand the GUIs for LESS. You can use different LESS tools for your platform. For command line usage and tools click this link.
The following table lists the GUI compilers that supports cross platform.
Sr.No. | Tools & Description |
---|---|
1 | Crunch 2! It supports across platforms like Windows, Mac and Linux. It provides editor with integrated compiling. |
2 | Mixture It is a rapid prototyping and static site generation tool used by designers and developers. It is quick, efficient and works well with your editor. It brings together a collection of awesome tools and best practices. |
3 | SimpLESS It is a minimalistic LESS compiler. It provides drag, drop and compile functionality. SimpLESS supports prefixing your CSS by using prefixr which is the unique feature of SimpLESS. It is built on Titanium platform. |
4 | Koala It is used to compile LESS, SASS and CoffeeScript. It provides features like compile error notification supports and compile options supports. |
The following table lists the GUI compilers that support Windows platform.
Sr.No. | Tools & Description |
---|---|
1 | Prepros It a tool that compiles LESS, SASS, Compass, Stylus, Jade and many more. |
2 | WinLess Initially it was a clone of LESS.app, it has several settings and takes more feature complete approach. It supports starting with command line arguments. |
The following table lists the GUI compilers that supports OS X platform.
Sr.No. | Tools & Description |
---|---|
1 | CodeKit t is successor of LESS.app and supports LESS among many other processing languages like SASS, Jade, Markdown and more. |
2 | LiveReload It edits CSS and changes images instantly. SASS, LESS, CoffeeScript and others work well. |
The following table lists the GUI compilers that supports OS X platform.
Sr.No. | Tools & Description |
---|---|
1 | Plessc It is gui frontend for lessc. It has features like log viewer, auto compile, opening the LESS file with the chosen editor and sourcemap support. |
In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site.
Let us now discuss editors and IDEs for LESS.
Sr.No. | Editors and IDEs & Description |
---|---|
1 | Crunch! It supports cross-platforms like Windows, Mac and Linux. It provides editor with integrated compiling. |
2 | Mindscape Web Workbench It provide CoffeeScript, SASS, Compass and LESS editing and makes modern web development easy in Visual Studio. |
3 | NetBeans It is an open-source Java-based IDE. This helps in the quick development of your desktop, mobile and web applications as well as HTML5 applications that involve HTML, JavaScript and CSS. |
4 | TextMate It is a general purpose graphical text editor for Mac OS X. It features declarative customizations, recordable macros, snippets, shell integration, open documents tabs and an extensible bundle system. |
5 | Vim The vim bundle adds functionalities like indenting, highlighting and auto completion for the dynamic stylesheet language LESS. |
6 | Emacs It contains less-css-model that provides an Emacs mode for LESS CSS (lesscss.org); Emacs supports compile-on-save. |
7 | jetBrains WebStorm and PhpStorm WebStrom is a lightweight and powerful IDE. It is perfectly equipped for complex client-side and server development with Node.js. PhpStorm is an PHP IDE, which supports deep code understanding, and provides top-notch coding assistance and support for all major tools and frameworks. |
8 | Brackets It is a lightweight, powerful and an open-source code editor that helps web designers and front-end developers. |
9 | CodeLobster It is a portable integrated development environment (IDE) primarily for PHP. It also supports HTML, CSS and JavaScript development and plugins are available for Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii and CakePHP. |
10 | KineticWing IDE It is a quick, clean, lightweight and portable IDE. It is a full-size development suite that helps you work smart and fast. |
11 | nodeMirror It is an open-source and easily customizable IDE. It utilizes CodeMirror.net, pty.js and other libraries. |
12 | HTML-Kit Tools This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor. |
Texto sublime 2 y 3
El texto sublime proporciona diferentes opciones para MENOS como se enumeran en la siguiente tabla:
No Señor. | Opciones y descripción |
---|---|
1 | Menos sublime La sintaxis LESS para texto sublime proporciona resaltado de sintaxis para archivos .less , junto con fragmentos. |
2 | Sublime-Less-to-CSS Complemento sublime de texto 2 y 3 para compilar archivos .less en CSS al guardar. Requierelessc instalado en PATH. |
3 | Menos construcción sublime Sistema de compilación LESS para sublime text 2 que proporciona dos sistemas de compilación para archivos LESS, tanto minificados como no minificados. |
4 | SublimeOnSaveBuild Es un complemento simple para sublime text 2 para activar una compilación cuando haces clic en Guardar. Funciona bien con preprocesadores como LESS, Compass y cualquier otro. |
Eclipse
Eclipse tiene dos complementos para MENOS que se enumeran en la siguiente tabla:
No Señor. | Complementos y descripción |
---|---|
1 | Eclipse Less Plugin Al extender el IDE de Eclipse, este complemento proporciona funciones útiles para editar y compilar MENOS hojas de estilo. |
2 | Complemento Transpiler Este complemento de Eclipse transpila automáticamente sus archivos como LESS, SASS, CoffeeScript, etc. |
Estudio visual
Visual Studio tiene las siguientes opciones diferentes para MENOS:
No Señor. | Opciones y descripción |
---|---|
1 | CSS es menos Esta extensión hace que los archivos LESS se abran con el servicio de lenguaje CSS. |
2 | Web Essentials 2012 Esta extensión le permite realizar tareas comunes mucho más fácilmente y agrega funciones útiles a Visual Studio para desarrolladores web. |
3 | Web Essentials 2013 Extiende Visual Studio con muchas características nuevas que no son específicas de un idioma o editor específico. |
4 | Herramientas web 2013 Esto le ayuda en las tareas de desarrollo que involucran ASP.NET |
Dreamweaver
Los siguientes puntos deben tenerse en cuenta al trabajar con Dreamweaver .
Es una aplicación de Adobe utilizada por diseñadores y desarrolladores web para crear aplicaciones y sitios web.
- Es capaz de trabajar en múltiples plataformas, incluidos navegadores, dispositivos y tabletas.
Los diseñadores web utilizan Dreamweaver para crear prototipos de sitios web.
El compilador DMXzone Less CSS hace que todos los poderes de LESS CSS se realicen directamente en Dreamweaver.
Bloc de notas ++ 6.x
Los siguientes puntos deben tenerse en cuenta al trabajar en Notepad ++ .
Notepad ++ es un editor de texto y un editor de código fuente gratuito que admite la edición con pestañas, es decir, trabajar con varios archivos abiertos en una sola ventana.
LESS para Notepad ++ es un archivo xml que proporciona resaltado de sintaxis o coloración para archivos .less. Para obtener más información, haga clic en este enlace .
Para instalar Notepad ++, haga clic en este enlace .
Compiladores de Node.js
A continuación se muestran los compiladores de Node.js que se usan para LESS.
gruñido-contrib-menos
Grunt es un corredor de tareas de Node. Compilará sus hojas de estilo cada vez que realice cambios en sus archivos LESS.
sin ensamblar
ensamblar-menos es un poderoso complemento gruñido para compilar archivos LESS en CSS. La tarea less extrae la plantilla JSON y Lo - dash (guión bajo) para definir los paquetes LESS, los componentes de la interfaz de usuario, las hojas de estilo comprimidas o los temas.
sin tragar
Es un complemento MENOS para Gulp. gulp-minify-css se usa para minimizar su CSS. gulp-sourcemaps se utiliza para generar la biblioteca sourcemaps.
RECESO
Es una herramienta de código abierto que se basa en LESS y ayuda a optimizar su código CSS. Mantiene el código CSS libre de errores, limpio y manejable.
autoless
Es un observador de archivos .less . Contiene seguimiento de dependencia y notificación multiplataforma.
Conectar middleware para Less.js
Se utiliza para permitir el procesamiento para conectar el marco JS de archivos LESS. Compila el archivo fuente a pedido y almacena en caché los datos compilados para la próxima solicitud.
Otras tecnologias
A continuación se presentan algunas otras tecnologías que le ayudarán a compilar un código MENOS.
Wro4j Runner CLI
Puede descargar wro4j-runner.jar y puede compilar su código LESS en CSS usando el siguiente comando:
java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss
Puede visitar el siguiente enlace para saber más sobre Wro4j Runner CLI
CSS :: LESSp
Este módulo se utiliza para analizar y compilar el archivo LESS en un archivo CSS. A continuación se muestra el comando utilizado para compilar:
lessp.pl styles.less > styles.css
Puede visitar el siguiente enlace para saber más sobre CSS :: LESSp
Host de secuencia de comandos de Windows
A continuación se muestra el compilador de línea de comandos que se ejecutará en Windows.
cscript //nologo lessc.wsf input.less [output.css] [-compress]
OR
lessc input.less [output.css] [-compress]
Puede visitar el siguiente enlace para saber más sobre Less.js para windows
sin puntos
El siguiente es un compilador de línea de comandos para ejecutar sin puntos para Windows.
dotless.Compiler.exe [-switches] <inputfile> [outputfile]
Puede visitar el siguiente enlace para saber más sobre dotless
UI / Frameworks y componentes del tema
LESS admite algunos de los marcos de UI / Theme que se enumeran en la siguiente tabla:
No Señor. | Marco y descripción |
---|---|
1 | 1 px de profundidad Es un tema plano de Bootstrap 3 que proporciona potentes controles de combinación de colores. |
2 | Bootflat Es un marco de código abierto basado en Bootstrap. |
3 | BootPress Es un framework PHP basado en CMS de archivo plano |
4 | Oreja Es un potente marco de front-end móvil para un desarrollo web más rápido y sencillo. |
5 | Bootstrap a11y theme Proporciona una fácil accesibilidad para el desarrollo web. |
6 | Bootswatch Es un tema de código abierto que proporciona temas gratuitos para Bootstrap. |
7 | Cardenal Es un marco CSS para dispositivos móviles que permite mantener CSS para sitios web, interfaces de usuario y aplicaciones receptivos. |
8 | CSSHorus Es una biblioteca que facilita el desarrollo de sitios web móviles. |
9 | UI plana gratis Se basa en Bootstrap 3, que contiene componentes básicos y complejos y proporciona un diseño de temas para Bootstrap. |
10 | frontsize Es un marco de interfaz que contiene un conjunto de herramientas para crear widgets. |
11 | InContent Especifica la descripción de la imagen usando CSS3 y SASS / LESS. |
12 | Tinta Crea interfaces web receptivas. |
13 | JBST Es un potente marco temático que se utiliza para crear temas secundarios para WordPress y se utiliza como creador de sitios web independiente. |
14 | KNACSS Se utiliza para desarrollar proyectos HTML / CSS mediante el uso de hojas de estilo adaptables y extensibles. |
15 | Kube Es un marco CSS utilizado para diseñadores y desarrolladores profesionales. |
dieciséis | Metro UI CSS Es un marco de interfaz utilizado para crear Windows Metro Style en los proyectos. |
17 | Pre Es el marco CSS que usa MENOS. |
18 | preludio Es un marco CSS frontend que usa MENOS. |
19 | Esquema Es un marco ligero y receptivo que ayuda a construir sitios web complejos. |
20 | Interfaz de usuario semántica Es un marco de interfaz de usuario que crea diseños receptivos utilizando HTML. |
21 | UIkit Es un marco frontend que incluye componentes HTML, CSS y JS y aplicaciones web fáciles de usar y desarrollar. |
22 | ngBoilerplate Es un sistema de compilación basado en gruñidos que se utiliza para proyectos de AngularJS. |
23 | menos carril Es un lenguaje de hoja de estilo dinámico que usa Less.js para proyectos Rails. |
24 | Pequeñito Es un marco de interfaz que contiene componentes de arranque HTML, CSS y JavaScript para desarrollar proyectos web receptivos. |
Sistemas de rejilla
LESS admite los marcos de sistemas de red que se enumeran en la siguiente tabla:
No Señor. | Marco y descripción |
---|---|
1 | Sistema de rejilla flexible Es un marco CSS que crea proyectos web de forma flexible. |
2 | adaptGrid Es un sistema de cuadrícula receptivo para desarrollar aplicaciones web. |
3 | Fluidable Es un sistema de cuadrícula de respuesta ligero basado en el preprocesador LESS. |
4 | Sistema de cuadrícula dorada Es un sistema de cuadrícula para un diseño receptivo. |
5 | MENOS rejilla Zen Se utiliza para resolver problemas de redondeo de subpíxeles. |
6 | Order.less Es una biblioteca LESS utilizada para alineación, sistema de cuadrícula y escalas modulares. |
7 | responsablemente Es un sistema de cuadrícula personalizable e independiente. |
8 | Plantilla adaptable Es un sistema de cuadrícula liviano que se usa para crear un diseño web receptivo para los sitios. |
9 | Semantic.gs Es la distribución predeterminada del navegador web para su sistema operativo. |
Bibliotecas Mixin
LESS proporciona bibliotecas mixin que se enumeran en la siguiente tabla:
No Señor. | Marco y descripción |
---|---|
1 | 3L Proporciona las funciones CSS3 más nuevas para el preprocesador LESS. |
2 | animar Es una biblioteca que se utiliza para las animaciones del navegador que se utilizan en los proyectos. |
3 | Claro Utiliza mixins LESS reutilizables sin destruir el estilo y crear un tamaño excesivo en las hojas de estilo. |
4 | Css3LessPlease Convierte css3please.com en MENOS mixins y el elemento obtendrá cambios instantáneos cuando ejecute el CSS. |
5 | CssEffects Proporciona efectos de estilo CSS escritos como LESS mixins. |
6 | Cssowl Es una biblioteca mixin que admite LESS, SASS y Stylus. |
7 | cubo sin Es un cubo animado en 3D creado usando solo CSS. |
8 | tRRtoolbelt.less Es una biblioteca que proporciona mixins y funciones para realizar acciones en LESS archivos. |
9 | est Se basa en LESS que permite escribir código LESS de manera más eficiente. |
10 | Hexágono Crea hexágonos CSS con tamaño y color. |
11 | Vagabundo Es una biblioteca mixin que contiene funciones útiles para Less.js. |
12 | LESS Elements Es una colección de mixins para el preprocesador LESS. |
13 | MENOS sombrero Es una biblioteca mixin que ayuda a exportar CSS para todos los navegadores y crea una cantidad de sombras, degradados y animaciones, etc. |
14 | Lessley Es un conjunto de pruebas que está escrito en MENOS. |
15 | MENOS-bidi Es una colección de mixins MENOS que proporciona un estilo bidireccional sin duplicación de código. |
dieciséis | LESS-Mix Es una biblioteca mixin escrita en MENOS. |
17 | media-query-to-type Se utiliza para crear consultas de medios que permiten que Internet Explorer 8 y versiones anteriores accedan al contenido. |
18 | Más colores menos Proporciona variables para la manipulación del color al diseñar aplicaciones web. |
19 | más-menos Es una biblioteca que permite escribir código CSS para compatibilidad entre navegadores. |
20 | Más menos Es una combinación de Compass y Twitter Bootstrap que proporciona más a MENOS mediante el uso de CSS3 y combinaciones de navegadores cruzados. |
21 | más o menos Proporciona potentes mixins por less.js. |
22 | normalizar menos Proporciona CSS normalizado usando MENOS. |
23 | Oban Es una colección de mixins que acelera el proceso de desarrollo de la aplicación web. |
24 | Prearranque Es un conjunto de servicios LESS que usa mixins y variables para escribir mejor CSS y se forma a partir de Bootstrap. |
25 | preludio-mixins Es una biblioteca de mixin MENOS. |
26 | Informe Proporciona una serie de mezclas para especificar varias formas para la aplicación. |