less的基本使用
目录
- 一、less语法
- 1. 变量
- 1.1 基础用法
- 1.2 变量用作属性名
- 1.3 变量用作类名
- 1.4 变量用作链接
- 1.5 定义多个变量
- 2. 混合
- 2.1 普通混合
- 2.2 不输出到css的混合
- 2.3 带选择器的混合
- 2.4 带参数的混合
- 2.5 参数有默认值的混合
- 2.6 多个参数的混合
- 2.7 arguments变量
- 2.7 得到混合中的 运算变量 的 返回值
- 3. 嵌套规则
- 3.1 基础用法
- 3.2 父元素选择器&
- 3.3 改变选择器的顺序&
- 4. 运算
- 5. 命名空间
- 6. 作用域
- 7. 引入
- 7.1 main.less
- 7.2 index.less
- 7.3 编译后的css
- 7.4 引入可携带参数
- 二、vue 配置less全局变量
一、less语法
1. 变量
1.1 基础用法
语法：@变量名: 值;
less:
// 1. 定义变量(全局变量) @bgColor:white; @Height:50rpx; .contain{ background-color: @bgColor; } .row{ height:@Height; margin-left:@Height; }编译后的css:
.contain { background-color: white; } .row { height: 50rpx; margin-left: 50rpx; }注意：
最好尽量用全局变量，避免无法复用！
比如我写变量@Height:50rpx;在contain{}里面，而row{}里面的@Height变量不存在，导致出错，这是叫局部变量。
1.2 变量用作属性名
语法：@变量名: 属性名;
less:
// 定义变量（属性名） @bg-img:background-image; div{ @{bg-img}:路径; }编译后的css:
div { background-image: 路径; }1.3 变量用作类名
语法：@变量名: 类名;
less:
//定义类名 @demo:newClass; .@{demo}-new{ // "-new"在类名基础上，新的类名 newClass-new @bg:rgb(0,0,0); background:@bg; } //div使用此类名 "newClass-new">demo
编译后的css:
.newClass-new { background: rgb(0,0,0); }1.4 变量用作链接
语法：@变量名: 路径;
less:
// 链接可以为任何链接*注意放置的位置 @bg-img:"路径"; header{ background:url(@bg-img); }编译后的css:
header { background: url("路径"); }1.5 定义多个变量
定义 同一变量名称（名字）两次或多次后，less只会选择最后定义的！
less:
@bg-img:"路径1"; @bg-img:"路径2"; @bg-img:"路径3"; header{ background:url(@bg-img); } // 结果为：background: url("路径3");2. 混合
混合就是一种将一系列属性从一个规则引入（“混合”）到另一个规则集的方式。这个意思是在less中定义的选择器类可以直接放入其他选择器类里面，这种重复使用很强。
2.1 普通混合
less:
//1.普通混合 .bor{ background-color: aqua; width: 32rpx; } .poop{ color:white; .bor; }编译后的css:
.bor { background-color: aqua; width: 32rpx; } .poop { color: white; background-color: aqua; width: 32rpx; }2.2 不输出到css的混合
如果你想要创建一个混合的类，但是我不想让它输出到css的样式并显示。
只要类的名字后面加上括号，就可以实现的，这样不会到css样式中显示！
less:
// 2.不带输出的混合 .mymix{ color:black; } .mymix-echa(){//css样式中不显示 background-color: white; } .dad{ width: 30rpx; height:30rpx; }编译后的css:
.mymix { color: black; } .dad { width: 30rpx; height: 30rpx; }在css样式中实现不显示.mymix-echa()类。
2.3 带选择器的混合
语法：{&：选择器};
less:
//3.带选择器的混合 .father(){ &:hover{ background-color: white; font-size:32px; } } .child{ // 编译后的类名字后面多了:hover .father; } .son{ // 编译后的类名字后面多了:hover .father; }编译后的css:
.child:hover { background-color: white; font-size: 32px; } .son:hover { background-color: white; font-size: 32px; }2.4 带参数的混合
语法：类的名称（形参）{};
less:
// 4.带参数的混合 .son(@width){ width:@width; } .dad{ .son(300px);//需要传一个参数进去 }编译后的css:
.dad { width: 300px; }2.5 参数有默认值的混合
语法：类的名称（形参）{};
less:
//5.带参数的混合默认值 .son(@width:200px){ width:@width; } .dad{ .son(); }编译后的css:
.dad { width: 200px; }2.6 多个参数的混合
一个组合可以带多个参数，参数之间可以使用分号或者逗号来分割。
但是建议尽量使用分号来分隔，因为这逗号可以编译为参数分割或者css为列表分割。
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:
.div { color-1: 1, 2, 3; padding-2: something, ele; margin-3: 2; }2.7 arguments变量
arguments变量表示可变参数，意思是形参从先到后的顺序。
注意：这个是参数值位置必须是一一对应。
less:
//7.arguments变量 .son3(@dd1:20px;@dd2:solid;@dd3:white){ border:@arguments; } .div4{ .son3(); }编译后的css:
.div4 { border: 20px solid white; }2.7 得到混合中的 运算变量 的 返回值
就像调用函数一样的过程。
less:
//8.得到混合中变量的返回值 .ave(@x,@y){ @ave:(@x+@y); } .son{ .ave(20px,40px); width:@ave; }编译后的css:
.son { width: 60px; }分析代码过程：
1.首先把二个参数分别为20px和40px传到.ave(@x,@y)；
2.在.ave{}里面获取了两个值并进行计算结果，然后给变量@ave；
3.在.son{}中调用了@ave的值；
4.最后生成了编译后css的结果width为60px。
3. 嵌套规则
3.1 基础用法
less:
//10.嵌套规则 .contain{ .dad{ width:30px; background-color: #fff; .son{ border-radius: 40px; } } .dad1{ height:300px; background-color: black; } }编译后的css:
.contain .dad { width: 30px; background-color: #fff; } .contain .dad .son { border-radius: 40px; } .contain .dad1 { height: 300px; background-color: black; }3.2 父元素选择器&
表示当前选择器的所有父选择器，使用&符引用选择器的名。
less:
//11.父元素选择器& .bgcolor{ background: black; a{ color:#fff; &:hover{ color:blue; } } }编译后的css:
.bgcolor { background: black; } .bgcolor a { color: #fff; } .bgcolor a:hover { color: blue; }3.3 改变选择器的顺序&
如果将当前的选择器名字后面放在&，就会当前的选择器提到父级。
less:
// 12.改变选择器的顺序& .contain{ h1&{ width:200px; height:300px; } } #son{ ul{ li{ .contain&{ height:100px; background-color: #fff; } } } }编译后的css:
h1.contain { width: 200px; height: 300px; } .contain#son ul li { height: 100px; background-color: #fff; }4. 运算
注意：
运算符与值之间必须以空格分开，涉及优先级时可以以()进行优先级运算。
less:
// 13.运算 .contain{ font-size:300px+200*2; }编译后的css:
.contain { font-size: 700px; }5. 命名空间
将一些需要的混和 组合在一起，可以通过嵌套多层id或者class来实现。
当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？此时就需要命名空间
#mynamespace() { //加 () 表示不输出到css .home {...} .user {...} }我们定义了一个名为 mynamespace 的命名空间，
如果我们要复用 user 这个选择器的时候，
在需要混入这个选择器的地方，只需使用 #mynamespace > .user 就可以了。
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:
.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
@baby:300px;
7.2 index.less
//16.引入 @import "../main"; //引入main.less文件 .contain-qq{ width:@baby; }7.3 编译后的css
.contain-qq { width: 300px; }7.4 引入可携带参数
@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全局变量
参考：https://blog.csdn.net/qq_42493241/article/details/120021001
