¡Desde el comienzo hasta el dominio de Less, explique las habilidades básicas de uso en detalle!

Less (abreviatura de Lener Style Sheets) es un lenguaje de extensión CSS compatible con versiones anteriores . , que amplía la funcionalidad de CSS (hojas de estilo en cascada) y proporciona un mecanismo de gestión y definición de estilo más flexible y potente. Al usar Less, los desarrolladores pueden escribir código de estilo mantenible y reutilizable, y lograr efectos de estilo complejos con una sintaxis concisa. Este artículo presentará los conceptos básicos y las características de Less, y cómo se puede utilizar para simplificar el proceso de desarrollo de CSS. Si desea obtener más información, puede visitar la documentación sobre menos chino de Rhino Book .

Instalar

Para instalar Less, primero debe asegurarse de que el entorno Node.js se haya instalado localmente y luego ejecute el siguiente comando para instalar Less en el entorno global del sistema:

npm install less -g

Una vez completada la instalación, puede ejecutar el comando en la consola.Si lessc -vaparece la información de la versión relevante, significa que la instalación se ha realizado correctamente.

Compilar y ejecutar

En un editor de IED como Vscode, cree un nuevo archivo .less con el sufijo .

@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

.lessDespués de crear y completar el archivo, el siguiente paso es lessc [option option=parameter ...] <source> [destination]compilarlo en un archivo .csscon el sufijo . Por ejemplo, para compilar index.less en index.css, use el siguiente comando:

lessc index.less index.css

Una vez completada la compilación, se puede generar el archivo .css , como se muestra en la siguiente figura para obtener más detalles:

uso básico

Variables

Declare @la variable con y use:

@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

producción:

#header { width: 10px; height: 20px; }

Más información sobre las variables...

Mezclando (Mezclados)

Los mixins son una forma de incluir (o mezclar) un conjunto de propiedades de un conjunto de reglas en otro conjunto de reglas. Supongamos que tenemos las siguientes clases:

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }

Queremos usar estos atributos en otros conjuntos de reglas, solo necesitamos poner el nombre de la clase donde queremos el atributo, así:

#menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }

.bordered Las propiedades de la clase ahora aparecerán en #menu a y .post a . (Tenga en cuenta que también puede usarlo #ids como mixins).

Más información sobre Mixins...

Anidamiento

Less le permite usar el anidamiento o combinarlo con cascada. Supongamos que tenemos el siguiente CSS:

#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }

En Less, también podemos escribir:

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }

El código generado es más conciso e imita la estructura de HTML.

También puede usar este método para agrupar pseudoselectores con mixins. Aquí está el truco clásico de clearfix (truco de flotación clara), reescrito como Mixins ( & que representa el padre del selector actual):

.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }

Obtenga más información sobre los selectores principales...

Reglas anidadas y burbujeo

Se pueden anidar como selectores @media , @supports etc. @ 规则（at-rule）La regla At se coloca en la parte superior y su orden relativo permanece sin cambios en relación con 规则集otros elementos en el mismo, lo que se denomina burbujeo.

.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { width: 800px; } }

producción:

.component { width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { .component { width: 800px; } }

Operaciones

Los operadores aritméticos +, -, *, / pueden operar sobre cualquier número, color o variable. Cuando sea posible, los operadores aritméticos realizan conversiones de unidades antes de sumar, restar o comparar. El resultado del cálculo se basa en el tipo de unidad del operando más a la izquierda . Las unidades se ignoran si la conversión de unidades no es válida o no tiene sentido. Conversión de unidad no válida, por ejemplo, conversión de px a cm o de rad a %.

// 数字转换为相同的单位 @convert: 5cm + 10mm; // returns 6cm @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是 4px // 带变量的示例 @base: 5%; @filler: @base * 2; // returns 10% @other: @base + @filler; // 结果是 15%

La multiplicación y la división no convierten números. En la mayoría de los casos, esto no tiene sentido, multiplicar una longitud por una longitud produce un área, y CSS no admite la especificación de un área. Less toma el número tal como es y asigna el tipo de unidad declarado explícitamente al resultado.

@base: 2cm * 3mm; // 结果是6cm

También puede realizar operaciones aritméticas en colores:

@color: (#224488 / 2); // 结果是#112244 background-color: #112244 + #111; // 结果是#223355

当然，你可能会发现 Less 的色彩函数更有用。

calc() 特例

_发布于 [v3.0.0] _

为了与 CSS 兼容，calc() 不会计算 Math 表达式，但会计算变量和嵌套函数中的 Math 表达式。

@var: 50vh/2; width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))

转义（Escaping）

转义（Escaping）允许你将任何任意字符串用作属性或变量值。~"anything" 或 ~'anything' 中的任何内容都会原样使用，除了插值。

@min768: ~"(min-width: 768px)"; .element { @media @min768 { font-size: 1.2rem; } }

结果为：

@media (min-width: 768px) { .element { font-size: 1.2rem; } }

注意，从 Less 3.5 开始，你可以简单地编写为：

@min768: (min-width: 768px); .element { @media @min768 { font-size: 1.2rem; } }

在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况不再需要。

函数（Functions）

Less 提供了各种函数，可以转换颜色、操作字符串和进行 Math 计算。它们在 Less 函数手册中有完整的文档。

使用它们非常简单。以下示例使用 percentage 函数（百分比）将 0.5 转换为 50％，将颜色的饱和度增加 5％，然后将背景颜色设置为亮度增加 25％并旋转 8 度：

@base: #f04615; @width: 0.5; .class { width: percentage(@width); // 返回 `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }

参见：函数参考

命名空间和访问器

不要与 CSS @namespace或命名空间选择器（namespace selectors 混淆。

有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你想要在 #bundle 下捆绑一些混合（mixins）和变量，以供以后重用或分发：

#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ...; } .citation { ...; } }

现在，如果我们想在 #header a 中混入 .button 类，我们可以这样做：

#header a { color: orange; #bundle.button(); // 也可以写成 #bundle > .button }

Nota: Si no desea que el espacio de nombres (por ejemplo #bundle(), ) aparezca en su salida CSS, puede () agregarlo al final del espacio de nombres, es decir #bundle .tab, .

mapas

A partir de Less 3.5, también puede usar mixins y conjuntos de reglas como mapas de valor.

#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; }

Esto generará el resultado esperado:

.button { color: blue; border: 1px solid green; }

Ver también: Mapas

Alcance

Scoping in Less es muy similar a CSS. Las variables y los mixins se buscan localmente primero y, si no se encuentran, se heredan del ámbito "principal".

@var: red; #page { @var: white; #header { color: @var; // white } }

Al igual que las propiedades personalizadas de CSS, los mixins y las definiciones de variables no tienen que colocarse antes de la línea que hace referencia a ellos. Por lo tanto, el siguiente código Less es el mismo que el ejemplo anterior:

@var: red; #page { #header { color: @var; // white } @var: white; }

Ver también: carga diferida

Comentarios

Se pueden usar estilos de bloque y comentarios en línea:

/* 一个块注释s * 样式注释！ */ @var: red; // 单行注释 @var: white;

Importador

La importación funciona principalmente como se esperaba. Puede importar .less el archivo y todas las variables en él estarán disponibles. Para .less archivos, la extensión es opcional.

@import "library"; // library.less @import "typo.css";

Más información sobre la importación...

Resumir

Lo anterior introduce el uso básico de Less, que básicamente se puede utilizar durante la construcción del proyecto. Si desea obtener más información, puede visitar el documento Less Chinese de Rhino Book .