在 Web 开发中，很多时候我们需要用到多列布局。传统的方式是使用浮动、定位等 CSS 属性来实现，但是这些方法有时候会出现布局错乱等问题。LESS 是一种 CSS 预处理语言，可以更方便、更灵活地实现多列布局。
什么是LESS？
LESS 是一种 CSS 预处理语言，它扩展了 CSS，为 CSS 加入了一些新的特性，使 CSS 更加灵活、易于维护。LESS 代码可以通过编译器将其转换成标准的 CSS 代码。
在 LESS 中，我们可以使用变量、嵌套、混合等特性来编写 CSS 样式，使样式代码更加简洁、易于维护。
多列布局实现方法
方法一：使用 LESS 的混合(mixins)功能
LESS 中可以定义混合(mixins)，混合类似于函数，可以封装重复的 CSS 样式，使代码更加简洁。
首先，我们定义一个混合，用来设置列的宽度和左右边距：
.column(@width) {
float: left;
margin-right: 2%;
width: @width;
}接下来，我们可以使用该混合来定义我们的列：
-- -------------------- ---- ------- ------ - ---------------- - ------ - ---------------- - ------ - ---------------- -
上面的代码表示定义了三个等宽的列，每个列的宽度为页面宽度的三分之一。
方法二：使用 LESS 的循环功能
LESS 中可以使用循环来生成一系列的 CSS 样式，并可以基于当前循环的索引值来生成不同的样式。
首先，我们定义一个变量来表示列的数量：
@column-count: 3;
接下来，我们可以使用 LESS 的循环功能来生成我们的列样式：
-- -------------------- ---- -------
------- -
------ -----
------------- ---
------ ----- - -------------- - --------------- - -- - ----
-
-- -------
---------------- ---- --- - -- -
--------- -
----------
------ --- - ----- - --------------- - ---- - -- - ----
-
--------------- - ---
-
----------------------------上面的代码中，我们首先定义了一个 .column 样式，用来设置列的基本样式。然后，我们使用了 LESS 的循环功能来生成列的具体样式。在循环中，我们通过计算每个列的宽度和左右边距来生成样式。
方法三：使用 LESS 的嵌套功能
LESS 中可以使用嵌套来组织 CSS 样式，使样式更加清晰、易于理解。
首先，我们定义一个父元素来包含我们的列：
.wrapper {
.column {
float: left;
margin-right: 2%;
}
}接下来，我们使用嵌套来定义我们的列：
-- -------------------- ---- -------
-------- -
------ -
------ ----
-
------ -
------ ----
-
------ -
------ ----
-
-上面的代码中，我们使用了 LESS 的嵌套功能来将列样式组织在父元素 .wrapper 内部，从而使样式更加清晰、易于理解。
示例代码
下面是一个完整的多列布局示例代码：
-- -------------------- ---- -------
-------------- --
---- -
------ -----
------------- ---
-
-- ----------
--------------- -
-------
------ -------
-
------ -
----------------
-
------ -
----------------
-
------ -
----------------
-
-- ----------
------- -
-------
------ ----- - -------------- - --------------- - -- - ----
-
---------------- ---- --- - -- -
--------- -
----------
------ --- - ----- - --------------- - ---- - -- - ----
-
--------------- - ---
-
----------------------------
-- ----------
-------- -
------- -
-------
-
------ -
------ ----
-
------ -
------ ----
-
------ -
------ ----
-
-总结
LESS 是一种 CSS 预处理语言，可以更方便、更灵活地实现多列布局。在 LESS 中，我们可以使用混合、循环、嵌套等特性来编写 CSS 样式，使样式代码更加简洁、易于维护。希望本文对你学习 LESS 实现多列布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f3b43ff6b2d6eab3d0112e