一、less语法
1. 变量
1.1 基础用法
语法：@变量名: 值;
less:
代码语言：less复制// 1. 定义变量(全局变量)
@bgColor:white;
@Height:50rpx;
.contain{
background-color: @bgColor;
}
.row{
height:@Height;
margin-left:@Height;
} 编译后的css:
代码语言：css复制.contain {
background-color: white;
}
.row {
height: 50rpx;
margin-left: 50rpx;
}
注意：
最好尽量用全局变量，避免无法复用！
比如我写变量@Height:50rpx;在contain{}里面，而row{}里面的@Height变量不存在，导致出错，这是叫局部变量。
1.2 变量用作属性名
语法：@变量名: 属性名;
less:
代码语言：less复制// 定义变量（属性名）
@bg-img:background-image;
div{
@{bg-img}:路径;
}
编译后的css:
代码语言：css复制div {
background-image: 路径;
}
1.3 变量用作类名
语法：@变量名: 类名;
less:
代码语言：less复制//定义类名
@demo:newClass;
.@{demo}-new{ // "-new"在类名基础上，新的类名 newClass-new
@bg:rgb(0,0,0);
background:@bg;
}
//div使用此类名
<div class="newClass-new">
<p>demo</p>
</div>
编译后的css:
代码语言：css复制.newClass-new {
background: rgb(0,0,0);
}
1.4 变量用作链接
语法：@变量名: 路径;
less:
代码语言：less复制// 链接可以为任何链接*注意放置的位置
@bg-img:"路径";
header{
background:url(@bg-img);
}编译后的css:
代码语言：css复制header {
background: url("路径");
}1.5 定义多个变量
定义 同一变量名称（名字）两次或多次后，less只会选择最后定义的！
less:
代码语言：less复制@bg-img:"路径1";
@bg-img:"路径2";
@bg-img:"路径3";
header{
background:url(@bg-img);
}
// 结果为：background: url("路径3");2. 混合
混合就是一种将一系列属性从一个规则引入（“混合”）到另一个规则集的方式。这个意思是在less中定义的选择器类可以直接放入其他选择器类里面，这种重复使用很强。
2.1 普通混合
less:
代码语言：less复制//1.普通混合
.bor{
background-color: aqua;
width: 32rpx;
}
.poop{
color:white;
.bor;
}编译后的css:
代码语言：css复制.bor {
background-color: aqua;
width: 32rpx;
}
.poop {
color: white;
background-color: aqua;
width: 32rpx;
}2.2 不输出到css的混合
如果你想要创建一个混合的类，但是我不想让它输出到css的样式并显示。
只要类的名字后面加上括号，就可以实现的，这样不会到css样式中显示！
less:
代码语言：less复制// 2.不带输出的混合
.mymix{
color:black;
}
.mymix-echa(){//css样式中不显示
background-color: white;
}
.dad{
width: 30rpx;
height:30rpx;
}编译后的css:
代码语言：css复制.mymix {
color: black;
}
.dad {
width: 30rpx;
height: 30rpx;
}在css样式中实现不显示.mymix-echa()类。
2.3 带选择器的混合
语法：{&：选择器};
less:
代码语言：less复制//3.带选择器的混合
.father(){
&:hover{
background-color: white;
font-size:32px;
}
}
.child{ // 编译后的类名字后面多了:hover
.father;
}
.son{ // 编译后的类名字后面多了:hover
.father;
}编译后的css:
代码语言：css复制.child:hover {
background-color: white;
font-size: 32px;
}
.son:hover {
background-color: white;
font-size: 32px;
}2.4 带参数的混合
语法：类的名称（形参）{};
less:
代码语言：less复制// 4.带参数的混合
.son(@width){
width:@width;
}
.dad{
.son(300px);//需要传一个参数进去
}编译后的css:
代码语言：css复制.dad {
width: 300px;
}2.5 参数有默认值的混合
语法：类的名称（形参）{};
less:
代码语言：less复制//5.带参数的混合默认值
.son(@width:200px){
width:@width;
}
.dad{
.son();
}编译后的css:
代码语言：css复制.dad {
width: 200px;
}2.6 多个参数的混合
一个组合可以带多个参数，参数之间可以使用分号或者逗号来分割。
但是建议尽量使用分号来分隔，因为这逗号可以编译为参数分割或者css为列表分割。
less:
代码语言：less复制//6.带多个参数的混合
.mini(@color;@padding:xxx;@margin:2){
color-1:@color;
padding-2:@padding;
margin-3:@margin;
}
.div{
.mini(1,2,3;something, ele);
}编译后的css:
代码语言：css复制.div {
color-1: 1, 2, 3;
padding-2: something, ele;
margin-3: 2;
}2.7 arguments变量
arguments变量表示可变参数，意思是形参从先到后的顺序。 注意：这个是参数值位置必须是一一对应。
less:
代码语言：less复制//7.arguments变量
.son3(@dd1:20px;@dd2:solid;@dd3:white){
border:@arguments;
}
.div4{
.son3();
}编译后的css:
代码语言：css复制.div4 {
border: 20px solid white;
}分析代码过程：
1.首先把二个参数分别为20px和40px传到.ave(@x,@y)；
2.在.ave{}里面获取了两个值并进行计算结果，然后给变量@ave；
3.在.son{}中调用了@ave的值；
4.最后生成了编译后css的结果width为60px。
3. 嵌套规则
3.1 基础用法
less:
代码语言：less复制//10.嵌套规则
.contain{
.dad{
width:30px;
background-color: #fff;
.son{
border-radius: 40px;
}
}
.dad1{
height:300px;
background-color: black;
}
}编译后的css:
代码语言：css复制.contain .dad {
width: 30px;
background-color: #fff;
}
.contain .dad .son {
border-radius: 40px;
}
.contain .dad1 {
height: 300px;
background-color: black;
}3.2 父元素选择器&
表示当前选择器的所有父选择器，使用&符引用选择器的名。
less:
代码语言：less复制//11.父元素选择器&
.bgcolor{
background: black;
a{
color:#fff;
&:hover{
color:blue;
}
}
}编译后的css:
代码语言：css复制.bgcolor {
background: black;
}
.bgcolor a {
color: #fff;
}
.bgcolor a:hover {
color: blue;
}3.3 改变选择器的顺序&
如果将当前的选择器名字后面放在&，就会当前的选择器提到父级。
less:
代码语言：less复制// 12.改变选择器的顺序&
.contain{
h1&{
width:200px;
height:300px;
}
}
#son{
ul{
li{
.contain&{
height:100px;
background-color: #fff;
}
}
}
}编译后的css:
代码语言：css复制h1.contain {
width: 200px;
height: 300px;
}
.contain#son ul li {
height: 100px;
background-color: #fff;
}4. 运算
注意：运算符与值之间必须以空格分开，涉及优先级时可以以()进行优先级运算。
less:
代码语言：less复制// 13.运算
.contain{
font-size:300px 200*2;
}编译后的css:
代码语言：css复制.contain {
font-size: 700px;
}5. 命名空间
将一些需要的混和 组合在一起，可以通过嵌套多层id或者class来实现。
当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？此时就需要命名空间
#mynamespace() { //加 () 表示不输出到css
.home {...}
.user {...}
}我们定义了一个名为 mynamespace 的命名空间，
如果我们要复用 user 这个选择器的时候，
在需要混入这个选择器的地方，只需使用 #mynamespace > .user 就可以了。
将一个选择集其中的一部分拿出来，只采用这一部分数据操作
less：
代码语言：less复制#bgcolor(){ // 加()默认不输出
background: #ffffff;
.a{
color: #888888;
&:hover{
color: green;
}
.b{
background: red;
}
}
}
.bgcolor1{
background: yellow;
#bgcolor>.a; // > 符号表示选中混合中的每一个样式
}
.bgcolor2{
// #bgcolor>.a>.b;
#bgcolor .a .b; // 省略写法：将>换成空格即可
}编译后的css:
代码语言：css复制.bgcolor1 {
background: yellow;
color: #888888;
}
.bgcolor1:hover {
color: green;
}
.bgcolor1 .b {
background: red;
}
.bgcolor2 {
background: red;
}6. 作用域
首先会在局部查找变量和混合，如果没找到，编译器会在父作用域中查找，以此类推。
7. 引入
可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用！
语法：@import 'less文件路径';
比如：有一个main.less文件，如何引入项目中
7.1 main.less
代码语言：less复制@baby:300px;7.2 index.less
代码语言：less复制//16.引入
@import "../main"; //引入main.less文件
.contain-qq{
width:@baby;
}7.3 编译后的css
代码语言：css复制.contain-qq {
width: 300px;
}7.4 引入可携带参数
代码语言：less复制@import "main.less";
@import (reference) "main.less"; //引用LESS文件，但是不输出
@import (inline) "main.less"; //引用LESS文件，但是不进行操作
@import (once) "main.less"; //引用LESS文件，但是进行加工，只能使用一次
@import (less) "index.css"; //无论是什么格式的文件，都把它作为LESS文件操作
@import (css) "main.less"; //无论是什么格式的文件，都把它作为CSS文件操作
@import (multiple) "../main.less"; //multiple，允许引入多次相同文件名的文件
@import (multiple) "../main.less"; //multiple，允许引入多次相同文件名的文件二、vue 配置less全局变量
总结下配置less全局变量踩过的坑
1、使用npm安装less
代码语言：bash复制npm install less --save2、安装less-loader 注意使用高版本run serve会有问题 这里使用的7.x版本
代码语言：bash复制npm install less-loader@7.x --save-dev3、安装style-resources-loader 和 vue-cli-plugin-style-resources-loader
代码语言：bash复制npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev4、在vue.config.js文件中配置 如果没有此文件在根目录创建一个即可
代码语言：javascript复制const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 全局less变量存储路径
path.resolve(__dirname, './src/assets/css/base.less'),
]
}
}
}注意目录配置方式./src/assets/css/base.less 修改你全局less文件所在的位置 目录不可使用简写方式 例如@/assets方式
5、使用方式 注：不需要在任何地方导入less文件就可以使用了
代码语言：html复制<style lang="less" scoped>
.info-contaner {
background-color: @color-high-text;
height: 90px;
width: 100%;
}
</style>style标签必须指令lang="less" 、@color-high-text就是你所定义的全局变量了
