less基本用法

以下是使用LESS的步骤：

1 安装LESS

你可以使用npm安装LESS，命令如下：

npm install -g less

在vue中使用less只需要安装less less-loader 和 style-resources-loader,不用下面的编译即可直接写在style lan ="less"中

2 编写LESS代码

在你的项目中创建一个.less文件，编写LESS代码。以下是一个简单的例子：

@primary-color: #007bff;

.button {
  background-color: @primary-color;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

在上面的代码中，我们定义了一个变量@primary-color，并在.button类中使用它。

3 编译LESS代码

使用lessc命令将LESS代码编译为CSS代码。命令如下：

lessc styles.less styles.css

上面的命令将会把styles.less文件编译为styles.css文件。

在HTML文件中引入CSS文件
在HTML文件中引入编译后的CSS文件：

<link rel="stylesheet" href="styles.css">

这样就可以使用LESS来编写CSS了。

4 使用LESS的高级功能

LESS提供了许多高级功能，以下是一些常用的：

引用父类：使用&符号可以引用最近的父类

.button{
	&::after{
		content: '';
	}

}

变量：使用@符号定义变量，可以在整个LESS文件中使用。

@primary-color: #007bff;

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

嵌套：可以在一个选择器内嵌套另一个选择器，使代码更加清晰。

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

混合：将一段CSS代码定义为一个混合器，在需要的地方调用。

.button-style {
  background-color: @primary-color;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}

.button {
  .button-style;
}

函数：可以定义一个函数，用于计算或处理CSS属性。
@base-size: 16px;

.font-size(@size) {
font-size: @size / @base-size * 1em;
}

h1 {
.font-size(24px);
}