LESS CSS 预处理器入门教程

什么是 LESS

LESS 是一种 CSS 预处理器，它可以让你使用类似编程语言的方式编写 CSS，可以更加方便、快捷地编写样式代码。LESS 的语法比纯 CSS 更加简洁明了，而且还支持变量、嵌套、混合（mixin）等特性，可以让你写出更加灵活、易于维护的 CSS 代码。

安装 LESS

在开始使用 LESS 之前，我们需要先安装 LESS。你可以通过 npm 来安装 LESS：

npm install -g less

安装完成后，你就可以在命令行中使用 LESS 编译器来将 LESS 文件编译成 CSS 文件了。

LESS 的语法

变量

在 LESS 中，我们可以使用 @ 符号来定义变量，例如：

@primary-color: #007bff;

.button {
  background-color: @primary-color;
}

这样，我们就可以在多个地方使用 @primary-color 变量，而不需要在每个地方都写上 #007bff。

嵌套

在 LESS 中，我们可以使用嵌套来简化 CSS 的书写，例如：

.container {
  width: 100%;

  .box {
    padding: 10px;
    background-color: #f2f2f2;
  }
}

这样，我们就可以将 .box 的样式嵌套在 .container 中，使代码更加清晰易懂。

混合

在 LESS 中，我们可以使用混合（mixin）来定义一组 CSS 样式，然后在需要的地方进行调用，例如：

.rounded-corners(@radius: 5px) {
  border-radius: @radius;
}

.box {
  .rounded-corners;
}

这样，我们就可以在 .box 中调用 .rounded-corners 混合，使 .box 具有圆角边框。

运算

在 LESS 中，我们还可以进行数值运算，例如：

@base-font-size: 16px;
@line-height: 1.5;
@font-size: @base-font-size * @line-height;

body {
  font-size: @font-size;
}

这样，我们就可以根据基础字体大小和行高计算出最终的字体大小。

LESS 的编译

在完成 LESS 文件的编写后，我们需要将其编译成 CSS 文件，然后在 HTML 中引入该 CSS 文件。我们可以在命令行中使用 LESS 编译器来将 LESS 文件编译成 CSS 文件，例如：

lessc styles.less styles.css

这样，我们就可以将 styles.less 文件编译成 styles.css 文件，在 HTML 中引入该 CSS 文件即可。

总结

通过本文的介绍，你已经了解了 LESS 的基本语法和用法，可以开始尝试使用 LESS 来编写更加灵活、易于维护的 CSS 代码了。当然，LESS 还有更多的功能和特性，你可以通过官方文档来深入学习。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650def1195b1f8cacd75c161