Less 是一种 CSS 预处理器，它扩展了 CSS 的功能，使得代码更加简洁、易于维护。本章将介绍如何使用 Less 的各种扩展特性来提升开发效率。
变量
变量允许你在 Less 文件中定义可重用的值。这些值可以是颜色、尺寸或其他任何类型的 CSS 属性值。通过使用变量，你可以轻松地在整个项目中统一和更新样式。
定义变量
@primary-color: #4d90fe; @secondary-color: #ff6b6b;
使用变量
body {
background-color: @primary-color;
}
h1 {
color: @secondary-color;
}计算与变量结合
变量不仅可以存储静态值，还可以用于计算。
-- -------------------- ---- -------
----------- -----
---------- -
---------- -----------
-
------- -
---------- ----------- - -----
-混合
混合允许你将一组 CSS 属性封装到一个名为“混合”的实体中，然后在需要的地方调用这个混合。这可以减少重复代码并提高代码的可读性。
定义混合
-- -------------------- ---- -------
----------------------- -
---------------------- --------
------------------- --------
-------------- --------
-
----------- -- --- -- ------ ---- ------- ----- -
------------------- -- -- ----- -------
---------------- -- -- ----- -------
----------- -- -- ----- -------
-调用混合
.box {
.border-radius(5px);
.shadow();
}函数
Less 提供了一些内置函数，允许你对变量进行数学运算、字符串操作等。这些函数可以帮助你更灵活地处理数据。
数学运算
@width: 100px; @height: @width * 2; // 结果为 200px
字符串操作
@text: "Hello World";
@result: concat("Welcome to ", @text); // 结果为 "Welcome to Hello World"嵌套规则
嵌套规则让你可以在一个选择器内部定义另一个选择器，从而创建更结构化的 CSS。
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- - -------- ------------- -
- -
-------- ------
-------- --- -----
---------------- -----
-
-名称空间
名称空间允许你组织和封装你的 Less 代码，避免命名冲突，并使代码更具模块化。
-- -------------------- ---- -------
---------- -
------ -
------ ----
-
-
-- -------
---------- - ------ -
------ -----
-运算符
Less 支持标准的数学运算符（+、-、*、/），可以用来创建动态的 CSS 属性值。
@base-width: 20px;
@multiplier: 3;
.width {
width: @base-width * @multiplier; // 结果为 60px
}条件语句
条件语句允许根据特定条件执行不同的 CSS 规则，这在响应式设计中特别有用。
@is-mobile: true;
.container {
width: 100%;
if(@is-mobile = true, & {
max-width: 480px;
});
}循环
循环可以让你重复生成一系列相似的 CSS 规则，这有助于减少冗余代码。
数字循环
-- -------------------- ---- -------
------------- ---- ------- - -- -
------------- - ----
------------------------ -
------ ----- - -------
------- ----- - -------
-
-
---------列表循环
-- -------------------- ---- -------
-------- ---- ------ -----
------------------ -
---------------- ---------------- ---- --- - -- -
--------------- - ---
----------- -
------ ---------------- ----
-
-
-
-------------------通过本章的学习，你应该能够掌握 Less 中的这些扩展特性，并将其应用于实际的前端开发项目中。这些功能将帮助你写出更高效、更易维护的 CSS 代码。