¿Qué es menos CSS y cómo se usa?

Si es un desarrollador de CSS experimentado, conocerá bien los inconvenientes del lenguaje. Todavía carece de soporte generalizado para funciones solicitadas desde hace mucho tiempo, como anidamiento y mezclas.

Less (Leaner Style Sheets) es una extensión de CSS con muchas funciones potentes. Si conoce CSS, entonces aprender Less es fácil porque la sintaxis de Less es muy similar.

Cómo instalar menos

Puede instalar Less con el Administrador de paquetes JavaScript, NPM mediante la ejecución:

npm instalar menos -g

Después de la instalación, puede compilar .menos archivos a .css utilizando el menosc dominio. Por ejemplo, el siguiente comando compila estilo.menos y emite los resultados en un estilo.css archivo.

menos estilo.menos estilo.css

Variables en Menos

A diferencia de CSS regular, que usa el operador "--" para definir variables, Less define variables usando el símbolo "@". Por ejemplo:

@ancho:40px;
@altura:80px;

El bloque de código simplemente crea dos variables, ancho y alto, que contienen dos valores respectivamente: 40px y 80px. Es una práctica común tomar valores de uso común en CSS y almacenarlos en una variable. Esto facilita la modificación de esos valores ya que solo hay una fuente de control.

Así es como puedes usar variables en Less. Crear un índice.htm archivo y agregue el siguiente código repetitivo:

html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8">
<metahttp-equiv="X-UA-Compatible"contenido="IE=borde">
<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0">
<enlacereal="hoja de estilo"href="estilo.css">
<título>Usar menos CSStítulo>
cabeza>
<cuerpo>
<división>
 ¡Hola de parte de los niños del planeta Tierra!
división>
cuerpo>
html>

A continuación, cree un estilo.menos archivo y agregue lo siguiente:

@ancho:400px;
@altura:400px;
@centro-vertical: centro;
@txt-blanco: blanco;
@bg-rojo: rgb(220, 11, 11);
@ fuente-40:40px;
división {
ancho: @ancho;
altura: @altura;
mostrar: doblar;
color: @txt-blanco;
color de fondo: @bg-rojo;
tamaño de fuente: @fuente-40;
}

Ahora, cuando puedas compilar el .menos archivo a .css utilizando el menosc dominio:

menos estilo.menos estilo.css

El CSS compilado debería verse así:

división {
ancho: 400píxeles;
altura: 400píxeles;
mostrar: doblar;
color: blanco;
color de fondo: #dc0b0b;
tamaño de fuente: 40píxeles;
}

Cuando abres tu navegador, esto es lo que deberías ver:

Hay mucho más que puede hacer con las variables en Less, como la interpolación que le permite usar variables como nombres de selector, URL y más. Aquí hay un ejemplo de cómo implementar la interpolación de variables:

@selector personalizado: envase;
.@{selector personalizado} {
relleno: 10px;
margen: 10px;
borde: sólido 10px;
}

El bloque de código anterior utiliza el @{...} cláusula para usar una variable como selector. Cuando se compila, el código dará como resultado lo siguiente:

.envase{
relleno: 10píxeles;
margen: 10píxeles;
borde: sólido 10píxeles;
}

Operaciones aritméticas en Less

Less también brinda soporte para operaciones aritméticas como suma, resta, división y multiplicación. Estas operaciones funcionan con constantes, valores y variables.

@variable-1:5px;
// Operación de multiplicación entre variable y constante
@variable-2:@variable-1 * 2
// Operación de suma entre valor y variable.
@variable-3:10px + @variable-2

Cómo usar mezclas

Mixins le permite reutilizar estilos (o código CSS) en toda la hoja de estilo. Otro Extensiones CSS como Sass También ofrecemos Mixins. Para ilustrar cómo funcionan los mixins en Less, cree un index.htm y agregue el siguiente código:

html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8">
<metahttp-equiv="X-UA-Compatible"contenido="IE=borde">
<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0">
<enlacereal="hoja de estilo"href="estilo.css">
<título>Usar menos CSStítulo>
cabeza>
<cuerpo>
<división>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 arquitecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolor! Voluptate quos autem culpa et sit, asumenda reiciendis
 facilis unde sequi.
división>
<pag>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 arquitecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolor! Voluptate quos autem culpa et sit, asumenda reiciendis
 facilis unde sequi.
pag>
<pag>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 arquitecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolor! Voluptate quos autem culpa et sit, asumenda reiciendis
 facilis unde sequi.
pag>
cuerpo>
html>

A continuación, cree un estilo.menos archivo y agregue las siguientes líneas:

.texto de ejemplo() {
color de fondo: amarillo;
}
.primera letra() {
color de fondo: rojo;
color: blanco;
tamaño de fuente: 30px;
}
pag {
.texto de ejemplo();
}
pag::primera letra {
.primera letra();
}

En el bloque de código anterior, hay dos clases mixtas: .texto de ejemplo y .primera letra. Cuando desee utilizar un mixin en otra parte de la hoja de estilo, simplemente haga referencia a él por su nombre entre paréntesis al final: .mixin(). En el navegador, debería ver algo como esto:

Anidamiento de estilos en menos

Digamos que tiene un div padre con dos elementos como hijos: a pag elemento y otro división. Por lo general, si desea diseñar el pag elemento con el color rojo y el división elementos con el color verde, podría utilizar el siguiente enfoque:

divisiónpag {
color: rojo;
}
división {
color: verde
}

Less proporciona una funcionalidad similar mediante el uso de anidando. Entonces, en este caso, el Less equivalente del bloque de código anterior sería:

división {
color: verde;
pag {
color: rojo;
 }
}

Esto no solo es más fácil de entender, sino que también hace que el código sea más fácil de mantener. Hacer referencia a los selectores principales con menos es más fácil con el & operador. Por ejemplo:

botón {
color de fondo: azul;
borde: ninguno;
&:flotar {
color de fondo: gris;
transformar: escala(1.2);
 }
}

El bloque de código anterior dará como resultado el siguiente código CSS cuando se compile:

botón {
color de fondo: azul;
borde: ninguno;
}
botón:flotar {
color de fondo: gris;
transformar: escala(1.2);
}

Comprender el alcance y las funciones en menos

Al igual que los lenguajes de programación regulares, las variables tienen el alcance del bloque en el que las defines. Para ilustrar esto, cree un nuevo índice.htm y agregue el primer código repetitivo HTML proporcionado anteriormente. Luego agregue el siguiente bloque en el cuerpo etiqueta:

<divisiónclase="exterior-div">
 La división exterior debe ser roja.
<hermano />
<durarclase="div interior">
 El div interno debe ser verde.
durar>
división>

En el estilo.menos archivo, agregue las siguientes líneas:

@bg-color: rojo;
cuerpo {
tamaño de fuente: 40px;
color: blanco;
margen: 20px;
}
.inner-div {
@bg-color: verde;
color de fondo: @bg-color;
}
.outer-div {
color de fondo: @bg-color;
}

El interior-div bloque redefine el bg-color variable, con alcance solo para ese bloque. Entonces, el color verde se aplica solo a esa clase y no afecta el global. bg-color variable. Cuando compilas y abres el resultado en el navegador, esto es lo que deberías ver:

Less también proporciona funciones útiles que pueden ser beneficiosas en algunos escenarios. Por ejemplo, si desea establecer un estilo solo si se cumple una determinada condición, puede hacerlo con el si función. Esta función tiene la siguiente sintaxis:

si((condición), valor1, valor2)

El código regresa valor1 si se cumple la condición y valor2 de lo contrario. Aquí hay un ejemplo:

@var1:20px;
@var2:20px;
división {
relleno: si((@var1 = @var2), 10px, 20px);
}

El bloque de código anterior debería dar como resultado el siguiente CSS cuando se compila:

división {
relleno: 10píxeles;
}

Haz más con menos y otras extensiones CSS

Miles de desarrolladores usan Less para hacer que escribir CSS sea un poco divertido. Características asombrosas como funciones, mixins y variables son solo una pequeña parte de lo que ofrece Less.

Less es adecuado tanto para proyectos pequeños como grandes. Vale la pena señalar que vale la pena revisar otros lenguajes de extensión CSS igualmente sorprendentes como Sass y Stylus CSS.