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 =.

escape("Hello!! welcome to Tutorialspoint!")

Genera una cadena de escape como -

Hello%21%21%20welcome%20to%20Tutorialspoint%21
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.

filter: e("Hello!! welcome to Tutorialspoint!");

Genera una cadena de escape como -

filter: Hello!! welcome to Tutorialspoint!;
3

% format

Esta función formatea una cadena. Se puede escribir con el siguiente formato:

%(string, arguments ...)
format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

Emite la cadena formateada como -

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4

replace

Se utiliza para reemplazar el texto dentro de una cadena. Utiliza algunos parámetros:

  • string - Busca la cadena y la reemplaza.

  • pattern - Busca el patrón de expresión regular.

  • replacement - Reemplaza la cuerda que coincide con el patrón.

  • flags - Estos son indicadores de expresión regular opcionales.

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

Reemplaza la cadena como -

"Welcome, to Tutorialspoint!"

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.

ceil(0.7)

Redondea el número a -

1
2

floor

Redondea el número al siguiente entero más bajo.

floor(3.3)

Redondea el número a -

3
3

percentage

Transforma el número de coma flotante en una cadena de porcentaje.

percentage(0.2)

convierte el número en cadena de porcentaje como -

20%
4

round

Redondea un número de coma flotante.

round(3.77)

convierte el número al valor de redondeo como -

4
5

sqrt

Devuelve la raíz cuadrada de un número.

sqrt(25)

define la raíz cuadrada de un número como -

5
6

abs

Proporciona el valor absoluto de un número.

abs(30ft)

muestra el valor absoluto como -

30ft
7

sin

Devuelve radianes en números.

sin(2)

calcula el valor del seno como -

0.90929742682
8

asin

Especifica arcoseno (inverso del seno) de un número que devuelve un valor entre -pi / 2 y pi / 2.

asin(1)

calcula el valor de asin como -

1.5707963267948966
9

cos

Devuelve el coseno del valor especificado y determina radianes en números sin unidades.

cos(2)

calcula el valor del cos como -

-0.4161468365471424
10

acos

Especifica el arcocoseno (inverso del coseno) de un número que devuelve un valor entre 0 y pi.

acos(1)

calcula el valor acos como -

0
11

tan

Especifica la tangente del número.

tan(60)

calcula el valor de bronceado como -

0.320040389379563
12

atan

Especifica arcotangente (inverso de la tangente) de un número especificado.

atan(1)

muestra un valor atan como -

0.7853981633974483
13

pi

Devuelve el valor pi.

pi()

determina el valor pi como -

3.141592653589793
14

pow

Especifica el valor del primer argumento elevado a la potencia del segundo argumento.

pow(3,3)

especifica el valor de potencia como -

27
15

mod

Devuelve el módulo del primer argumento con respecto al segundo argumento. También maneja números de coma flotante y negativos.

mod(7,3)

devuelve el valor del módulo como -

1
dieciséis

min

Especifica el valor más pequeño de uno o más argumentos.

min(70,30,45,20)

devuelve el valor mínimo como -

20
17

max

Especifica el valor más alto de uno o más argumentos.

max(70,30,45,20)

devuelve el valor máximo como -

70

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.

isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false
2

isstring

Toma un valor como parámetro y devuelve verdadero , si es una cadena o falso en caso contrario.

isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false
3

iscolor

Toma un valor como parámetro y devuelve verdadero , si el valor es un color o falso si no lo es.

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false
4

iskeyword

Toma un valor como parámetro y devuelve verdadero , si el valor es una palabra clave o falso si no lo es.

iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false
5

isurl

Toma un valor como parámetro y devuelve verdadero , si el valor es una URL o falso si no lo es.

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false
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.

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false
7

isem

Toma un valor como parámetro y devuelve verdadero , si el valor es un valor em o falso si no lo es.

isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false
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.

ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false
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.

isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false
10

isruleset

Toma un valor como parámetro y devuelve verdadero , si el valor es un conjunto de reglas o falso en caso contrario.

@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

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:

  • red - Contiene un número entero entre 0 - 255 o porcentaje entre 0 - 100%.

  • green - Contiene un número entero entre 0 - 255 o porcentaje entre 0 - 100%.

  • blue - Contiene un número entero entre 0 - 255 o porcentaje entre 0 - 100%.

rgb(220,20,60)

convierte el color con valores rgb como -

#dc143c
2

rgba

Determina el color a partir de los valores rojo, verde, azul y alfa. Tiene los siguientes parámetros:

  • red - Contiene un número entero entre 0 - 255 o porcentaje entre 0 - 100%.

  • green - Contiene un número entero entre 0 - 255 o porcentaje entre 0 - 100%.

  • blue - Contiene un número entero entre 0 - 255 o porcentaje entre 0 - 100%.

  • alpha - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

rgba(220,20,60, 0.5)

convierte el objeto de color con valores rgba como -

rgba(220, 20, 60, 0.5)
3

argb

Define la representación hexadecimal del color en #AARRGGBBformato. Utiliza el siguiente parámetro:

  • color - Especifica el color del objeto.

argb(rgba(176,23,31,0.5))

devuelve el color argb como -

#80b0171f
4

hsl

Genera el color a partir de valores de tono, saturación y luminosidad. Tiene los siguientes parámetros:

  • hue - Contiene un número entero entre 0 - 360 que representa grados.

  • saturation - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

  • lightness - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

hsl(120,100%, 50%)

devuelve el objeto de color usando valores HSL como -

#00ff00
5

hsla

Genera el color a partir de matiz, saturación, luminosidad y valores alfa. Tiene los siguientes parámetros:

  • hue - Contiene un número entero entre 0 - 360 que representa grados.

  • saturation - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

  • lightness - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

  • alpha - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

hsla(0,100%,50%,0.5)

especifica el objeto de color usando valores HSLA como -

rgba(255, 0, 0, 0.5);
6

hsv

Produce el color a partir de los valores de matiz, saturación y valor. Contiene los siguientes parámetros:

  • hue - Contiene un número entero entre 0 - 360 que representa grados.

  • saturation - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

  • value - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

hsv(80,90%,70%)

convierte el objeto de color con valores hsv como -

#7db312
7

hsva

Produce el color a partir de matiz, saturación, valor y valores alfa. Utiliza los siguientes parámetros:

  • hue - Contiene un número entero entre 0 - 360 que representa grados.

  • saturation - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

  • value - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

  • alpha - Contiene número entre 0 - 1 o porcentaje entre 0 - 100%.

hsva(80,90%,70%,0.6)

especifica el objeto de color con valores hsva como -

rgba(125, 179, 18, 0.6)

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.

background: hue(hsl(75, 90%, 30%));

Se compila en CSS como se muestra a continuación:

background: 75;
2

saturation

En el espacio de color HSL, el canal de saturación se extrae del objeto de color.

background: saturation(hsl(75, 90%, 30%));

Se compila en CSS como se muestra a continuación:

background: 90%;
3

lightness

En el espacio de color HSL, el canal de luminosidad se extrae del objeto de color.

background: lightness(hsl(75, 90%, 30%));

Se compila en CSS como se muestra a continuación:

background: 30%;
4

hsvhue

En el espacio de color HSV, el canal de tono se extrae del objeto de color.

background: hsvhue(hsv(75, 90%, 30%));

Se compila en CSS como se muestra a continuación:

background: 75;
5

hsvsaturation

En el espacio de color HSL, el canal de saturación se extrae del objeto de color.

background: hsvsaturation(hsv(75, 90%, 30%));

Se compila en CSS como se muestra a continuación:

background: 90%;
6

hsvvalue

En el espacio de color HSL, el canal de valor se extrae del objeto de color.

background: hsvvalue(hsv(75, 90%, 30%));

Se compila en CSS como se muestra a continuación:

background: 30%;
7

red

El canal rojo se extrae del objeto de color.

background: red(rgb(5, 15, 25));

Se compila en CSS como se muestra a continuación:

background: 5;
8

green

El canal verde se extrae del objeto de color.

background: green(rgb(5, 15, 25));

Se compila en CSS como se muestra a continuación:

background: 15;
9

blue

El canal azul se extrae del objeto de color.

background: blue(rgb(5, 15, 25));

Se compila en CSS como se muestra a continuación:

background: 25;
10

alpha

El canal alfa se extrae del objeto de color.

background: alpha(rgba(5, 15, 25, 1.5));

Se compila en CSS como se muestra a continuación:

background: 2;
11

luma

El valor de luminancia se calcula a partir de un objeto de color.

background: luma(rgb(50, 250, 150));

Se compila en CSS como se muestra a continuación:

background: 71.2513323%;
12

luminance

El valor de luma se calcula sin corrección de gamma.

background: luminance(rgb(50, 250, 150));

Se compila en CSS como se muestra a continuación:

background: 78.53333333%;

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 ...]  [destination]

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.

lessc -help
lessc -h
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 (;).

lessc --include-path = PATH1;PATH2
3

Makefile

Genera una lista de dependencias de importación de archivos MAKE a stdout como salida.

lessc -M
lessc --depends
4

No Color

Desactiva la salida coloreada.

lessc --no-color
5

No IE Compatibility

Desactiva las comprobaciones de compatibilidad de IE.

lessc --no-ie-compat
6

Disable Javascript

Deshabilita el javascript en menos archivos.

lessc --no-js
7

Lint

Comprueba la sintaxis e informa de errores sin ningún resultado.

lessc --lint
lessc -l
8

Silent

Detiene a la fuerza la visualización de mensajes de error.

lessc --silent
lessc -s
9

Strict Imports

Fuerza evalúa importaciones.

lessc --strict-imports
10

Allow Imports from Insecure HTTPS Hosts

Importa desde los hosts HTTPS inseguros.

lessc --insecure
11

Version

Muestra el número de versión y sale.

lessc -version
lessc -v
12

Compress

Ayuda a eliminar los espacios en blanco y comprimir la salida.

lessc -x
lessc --compress
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.

lessc --source-map
lessc -source-map = file.map
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.

lessc --source-map-rootpath = dev-files/
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.

lessc --source-map-basepath = less-files/
dieciséis

Source Map Less Inline

Todos los archivos Less deben incluirse en el mapa fuente.

lessc --source-map-less-inline
17

Source Map Map Inline

Especifica que en el css de salida el archivo de mapa debe estar en línea.

lessc --source-map-map-inline
18

Source Map URL

Se permite que una URL anule los puntos en el archivo de mapa en el CSS.

lessc --source-map-url = ../my-map.json
19

Rootpath

Establece rutas para la reescritura de URL en importaciones y URL relativas.

lessc -rp=resources/
lessc --rootpath=resources/
20

Relative URLs

En los archivos importados, la URL se reescribe para que la URL sea siempre relativa al archivo base.

lessc -ru
lessc --relative-urls
21

Strict Math

Procesa todas las funciones matemáticas en su css. De forma predeterminada, está desactivado.

lessc -sm = on
lessc --strict-math = on
22

Strict Units

Permite unidades mixtas.

lessc -su = on
lessc --strict-units = on
23

Global Variable

Se define una variable a la que puede hacer referencia el archivo.

lessc --global-var = "background = green"
24

Modify Variable

Esto es diferente a la opción de variable global; mueve la declaración al final de su archivo less.

lessc --modify-var = "background = green"
25

URL Arguments

Para pasar a cada URL, se permite especificar un argumento.

lessc --url-args = "arg736357"
26

Line Numbers

Se genera un mapeo de origen en línea.

lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
27

Plugin

Carga el complemento.

lessc --clean-css
lessc --plugin = clean-css = "advanced"

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.