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使用此类名
<div class="newClass-new">
    <p>demo</p>
</div>

编译后的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