Preprocesador CSS | MENOS – Barcelona Geeks

LESS significa Hojas de Estilo Más Esbeltas . Es una extensión de lenguaje compatible con versiones anteriores para CSS. Nos permite usar funciones como variables, anidamiento, mixins, etc., todo en una sintaxis compatible con CSS. LESS está influenciado por SASS y ha influido en la nueva sintaxis «SCSS» de SASS. LESS se usó en Bootstrap 3 pero fue reemplazado por SASS en Bootstrap 4.

Requisitos previos:

HTML
CSS

Requisitos del sistema

Sistema Operativo: Multiplataforma
Soporte de navegador: IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Tipo de archivo: Todos los archivos LESS deben tener la extensión de archivo .less .

Funcionando: un navegador web no entiende el código LESS en sí. Es por eso que necesitará un preprocesador LESS para cambiar los códigos LESS en un código CSS estándar simple.

Pasos de trabajo:

Escribe el código LESS en un archivo.
Compile el código LESS en código CSS usando el comando lessc input.less output.less .
Incluya el archivo CSS compilado en el archivo html.

Características:

Variables: las variables se pueden usar para almacenar el valor de CSS que se puede reutilizar. Se inicializan con @ .

@lt-gray: #ddd;

@background-dark: #512DA8;

@carousel-item-height: 300px;

Mixins: Los mixins son una forma de incluir un conjunto de propiedades de un conjunto de reglas en otro conjunto de reglas.

zero-margin {
    margin:0px auto;
    background:@white;
}
  
.row-header {
    .zero-margin;
    padding:0px auto;
}
  
.row-content {
    .zero-margin;
    border-bottom: 1px ridge;
    min-height:400px;
    padding: 50px 0px 50px 0px;
}

Anidamiento: LESS le brinda la posibilidad de utilizar el anidamiento.

.carousel {
    background:@background-dark;
  
    .carousel-item {
        height: @carousel-item-height;
        img {
            position: absolute;
            top: 0;
            left: 0;
            min-height: 300px;
        }
    }
}

Operaciones Matemáticas: Las operaciones aritméticas +, -, *, / pueden operar sobre cualquier número, color o variable.

.carousel-item {

    height: @carousel-item-height;

}



.carousel-item .item-large {

    height: @carousel-item-height *2;

}
Funciones: LESS proporciona una variedad de funciones como matemática, lista, string, operaciones de color, combinación de colores, etc.

@width: 0.8;



.class {

    width: percentage(@width); // Returns `80%`

    color: saturate(@base, 5%);

    background-color: spin(lighten(@base, 25%), 8);

}

Ejemplo: nombre de archivo gfg.html

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"/> 
          
        <title>LESS</title> 
          
        <meta name="viewport" content= 
            "width=device-width, initial-scale=1"> 
              
        <link rel="stylesheet" href="./css/style.css"> 
    </head> 
      
    <body> 
        <div class="head">Welcome to GeeksforGeeks. 
            <ul class="list"> 
                <li class="a">Algo</li> 
                <li>DS</li> 
                <li class="a">Languages</li> 
                <li>Interviews</li> 
                <li>CS subjects</li> 
            </ul> 
        </div>     
    </body> 
</html>                                      

Nombre de archivo style.less

@color-primary: #009900;
@font-pri: Sans-Serif;
@font-sec: Helvetica;
  
body{
    color: @color-primary;
    font-size: 40px;
}
  
.list{
    font-family: @font-pri;
    font-size: 20px;
    .a{
        font-family: @font-sec;
        font-size: 10px;
    }
}

Nombre de archivo style.css que obtenemos después de transpilar style.less

body {
  color: #009900;
  font-size: 40px;
}
.list {
  font-family: Sans-Serif;
  font-size: 20px;
}
.list .a {
  font-family: Helvetica;
  font-size: 10px;
}

Producción:

ventajas:

LESS es compatible con todos los navegadores.
LESS proporciona una lista de operadores que facilita la codificación de los usuarios.
El mantenimiento es fácil debido al uso de variables.

Desventajas:

LESS proporciona menos marcos en comparación con SASS.
Puede ser complicado para aquellos que son nuevos en CSS.

Publicación traducida automáticamente

Artículo escrito por AakashYadav4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta