LESS 让css也支持变量，运算符，include,嵌套规则等等

LESS是一种CSS预处理器，它可以让我们使用变量、运算符、函数、嵌套规则等等，增强我们在编写CSS时的灵活性和可维护性。下面我将详细介绍如何使用LESS。

安装LESS

首先需要安装LESS，有两种方式：

1. 使用npm安装：在终端输入npm install -g less，全局安装LESS。
2. 下载LESS官网最新版本：https://less.bootcss.com/installation/，将less.js文件引入到HTML文件中即可。

变量

通过使用变量，我们可以存储一些常用的CSS属性。例如，我们可以将颜色值存储为变量，并在需要的地方使用。在LESS中，变量以@开头。例如：

@primary-color: #007bff;

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

在编译后，产生的CSS代码如下：

.button {
  background-color: #007bff;
}

运算符

LESS中支持运算符，例如加减乘除和取模。通过使用运算符，我们可以在CSS中进行数学计算。例如：

@base: 100px;
@small: @base / 2;
@large: @base * 2;

.box {
  width: @small;
  height: @large % 3;
}

在编译后，产生的CSS代码如下：

.box {
  width: 50px;
  height: 200px;
}

Mixin

使用Mixin可以将一组CSS属性和值组合成一个可重复使用的代码块。在LESS中，Mixin以.mixin-name()的形式定义。我们可以通过在需要的地方使用@include来引用这个Mixin，例如：

.box-s {
  .size(50px);
}

.box-m {
  .size(100px);
}

.size(@size) {
  width: @size;
  height: @size;
}

.box {
  @include size(200px);
}

在编译后，产生的CSS代码如下：

.box-s {
  width: 50px;
  height: 50px;
}

.box-m {
  width: 100px;
  height: 100px;
}

.box {
  width: 200px;
  height: 200px;
}

嵌套规则

嵌套规则是指在一个选择器中嵌套另一个选择器，这在编写复杂的CSS样式时非常有用。在LESS中，我们可以使用嵌套规则来改进CSS的结构。例如：

.list {
  > li {
    font-size: 14px;
    &:hover {
      background-color: #eee;
    }
  }
  .title {
    font-size: 16px;
  }
}

在编译后，产生的CSS代码如下：

.list > li {
  font-size: 14px;
}
.list > li:hover {
  background-color: #eee;
}
.list .title {
  font-size: 16px;
}

通过以上示例，我们可以发现使用LESS可以让我们的CSS代码更具有可读性、可维护性和可重用性，因此在开发中使用LESS是一个不错的选择。