CSS3 多列布局是指将内容分成多个垂直列来显示，通常用于文章的排版。LESS 作为一种 CSS 预处理器，提供了更便捷的方式来实现多列布局。本文将介绍 LESS 如何支持 CSS3 多列布局，并提供详细的示例代码和学习指导。
CSS3 多列布局简介
CSS3 多列布局是 CSS3 中新增的一种布局方式，用于将一段文章分为多栏展示。它的主要特点是可以实现自适应宽度和自适应高度，并且可以控制列与列之间的间距和分割线。
多列布局支持的浏览器有：Chrome、Firefox、Safari、Opera、IE10 以上版本等。
LESS 中的多列布局
LESS 的 mixin 和变量功能，可以很好地支持 CSS3 多列布局的实现。通过使用 LESS 的 mixin 可以减少重复代码的编写，提高开发效率。
下面是一个 LESS mixin 实现的多列布局代码：
-- -------------------- ---- ------- ----------------------- -- ------------ ----- ------------- --- ----- ----- - ------------------ -------------- --------------------- -------------- ------------- -------------- ---------------- ------------ ------------------- ------------ ----------- ------------ ----------------- ------------- -------------------- ------------- ------------ ------------- -展开代码
该 mixin 接收三个参数：@column-count 用于设置列数，默认为 3；@column-gap 用于设置列之间的间距，默认为 20px；@column-rule 用于设置分割线的样式，默认为 1px 实线边框，颜色为 #ccc。
调用该 mixin，只需要按照下面的方式定义样式即可：
.content { .columns(); }
或者按照自己的需求传入参数：
.content { .columns(2, 10px, 3px dashed red); }
示例代码
下面是一个完整的多列布局示例代码，包含 LESS 和 HTML 代码。
HTML 代码：
<div class="content"> <h1>多列布局示例</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel magna nec odio suscipit tincidunt at tristique est. Morbi libero nibh, sagittis vitae luctus sit amet, commodo ac ipsum. Donec lobortis, libero in convallis hendrerit, tortor velit interdum leo, quis dignissim nisl elit sed elit. Sed at velit pellentesque, dignissim dui eu, suscipit nisi. Sed venenatis, dui molestie scelerisque gravida, augue mauris finibus ipsum, et consequat dolor ex sed purus.</p> <p>Curabitur lacinia erat lectus, in faucibus massa sollicitudin laoreet. Integer ac est feugiat, sollicitudin neque sit amet, malesuada dolor. Donec mauris nulla, pretium vitae interdum vitae, feugiat eget tortor. In porta consequat tortor nec blandit. Duis id suscipit tellus, et vulputate nisl. Nullam nec est sit amet justo dictum imperdiet eu ac lacus. Maecenas consectetur, leo nec commodo eleifend, velit enim dapibus nunc, id laoreet massa libero sed lectus. </p> <p>Maecenas velit felis, malesuada ac nulla eu, volutpat gravida sapien. Aliquam ullamcorper tellus at urna molestie aliquet. Donec euismod, libero eu interdum mattis, eros sapien tempor lacus, tristique placerat nisl mauris a eros. In sit amet interdum odio. Curabitur volutpat maximus malesuada. Aenean vel massa aliquam, feugiat nisi nec, tincidunt felis. Aliquam enim sem, consectetur vel vehicula non, rutrum a enim. Phasellus id malesuada turpis, ac laoreet nibh. Curabitur commodo sapien aliquet accumsan ornare. Praesent scelerisque leo non felis varius porttitor. </p> <p>Mauris iaculis neque at velit sollicitudin faucibus. Sed dictum nibh ac turpis sollicitudin, vel feugiat arcu imperdiet. Suspendisse quis felis vel erat convallis dignissim sit amet ut risus. Fusce imperdiet volutpat dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed eget elit ut libero blandit aliquet eget nec sapien. Nunc pellentesque sollicitudin odio, eget interdum sapien iaculis a. </p> </div>
LESS 代码：
-- -------------------- ---- ------- -------- - ----------- -- - ----------- ------- - - - ----------- -------- ------------- ----------- - -展开代码
以上代码将输出 3 列，间距为 20px，分割线为 1px 实线边框，颜色为 #ccc。
学习指导
LESS 的使用可以使 CSS3 多列布局的实现更加简单方便。需要注意的是，在使用 LESS 进行多列布局时，需要注意浏览器的兼容性问题。如果需要兼容 IE8 及以下版本浏览器，则需要使用 JavaScript 进行 polyfill。
在学习 LESS 时，可以参考官方文档及其它相关资料。同时，还可以通过实践不断加深学习。建议在实践时，首先根据需求定义 mixin 和变量，并尽可能地减少重复代码，提高代码的可读性和维护性。
总体来说，LESS 的 mixin 和变量提供了更加便捷灵活的方式来实现 CSS3 多列布局，具有较高的实用性和学习参考价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ba8006306f20b3a6948897
